Drawer 抽屉弹窗

抽屉弹窗组件，用于显示操作结果或提示信息。

基础用法

<template>
  <pa-button font="star_arc_line" @click="debouncedClick1">Drawer弹窗</pa-button>

  <pa-drawer
    v-model="drawerVisible"
    :title="{ 'zh-CN': '弹窗', 'en-US': 'Drawer' }"
    :sub-title="{ 'zh-CN': '弹窗副标题', 'en-US': 'Drawer Subtitle' }"
    scroll
    :padding="['all']"
  >
    <div style="height: 1500px">弹窗内容</div>
    <template #footer>
      <pa-button type="primary" @click="drawerVisible = false" is="cancel">关闭</pa-button>
    </template>
  </pa-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const drawerVisible = ref(false);

function debouncedClick1() {
  drawerVisible.value = true;
}
</script>

<style></style>

显示代码

显示位置

抽屉弹窗可以在顶部、左侧、右侧、底部显示，抽屉弹窗默认在右侧显示。

<template>
  <pa-button font="star_arc_line" @click="debouncedClick('top')">顶部弹窗</pa-button>
  <pa-button font="star_arc_line" @click="debouncedClick('left')">左侧弹窗</pa-button>
  <pa-button font="star_arc_line" @click="debouncedClick('right')">右侧弹窗</pa-button>
  <pa-button font="star_arc_line" @click="debouncedClick('bottom')">底部弹窗</pa-button>

  <pa-drawer
    v-model="drawerVisible"
    :title="{ 'zh-CN': '弹窗', 'en-US': 'Drawer' }"
    :sub-title="{ 'zh-CN': '弹窗副标题', 'en-US': 'Drawer Subtitle' }"
    scroll
    :padding="['all']"
    :position="position"
  >
    <div style="height: 1500px">弹窗内容</div>
    <template #footer>
      <pa-button type="primary" @click="drawerVisible = false" is="cancel">关闭</pa-button>
    </template>
  </pa-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const drawerVisible = ref(false);
const position = ref("top" as const);

function debouncedClick(value) {
  drawerVisible.value = true;
  position.value = value;
}
</script>

<style></style>

显示代码

SaDrawerType

属性名	描述	类型	默认值
modelValue	是否打开抽屉弹窗，当设置为 true 时，会打开抽屉弹窗	boolean	false
title	弹窗标题，支持多语言	Record<"en-US" | "zh-CN", string>	—
subTitle	弹窗次标题，支持多语言	Record<"en-US" | "zh-CN", string>	—
width	弹窗宽度，默认 500px	string	500px
height	弹窗高度，默认 300px	number	300px
scroll	是否开启抽屉弹窗滚动	boolean	true
useScrollX	是否开启抽屉弹窗滚动，默认不开启滚动	boolean	false
closeOnClickModal	是否点击抽屉弹窗遮罩层关闭抽屉弹窗，默认开启	boolean	true
closeOnPressEscape	是否按下 Escape 键关闭抽屉弹窗，默认开启	boolean	true
padding	弹窗内边距	Array<"all" | "bottom" | "left" | "right" | "top">	—
position	弹窗位置	"bottom" "left" "right" "top"	right