Dialog 弹窗

常用的弹窗组件。

基础用法

开盖即用，更可配置 自定义 个性化使用。

<template>
  <pa-button is="go" @click="visible = true">显示弹窗</pa-button>
  <pa-dialog v-model="visible" title="弹出框Dialog" height="300">
    <template #header>
      <div class="custom-header">自定义 Header</div>
    </template>
    Slot
    <template #footer>自定义 Footer</template>
  </pa-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible = ref(false);
</script>

<style scoped>
.custom-header {
  padding: var(--pa-size-padding);
  font-weight: bold;
}
</style>

显示代码

宽度设置

使用 size 来定义弹出框尺寸。

<template>
  <pa-button is="go" @click="visible1 = true">显示弹窗 max</pa-button>
  <pa-button is="go" @click="visible2 = true">显示弹窗 s</pa-button>
  <pa-button is="go" @click="visible3 = true">显示弹窗 m</pa-button>
  <pa-button is="go" @click="visible4 = true">显示弹窗 l</pa-button>
  <pa-button is="go" @click="visible5 = true">自定义宽度</pa-button>

  <pa-dialog v-model="visible1" height="default" title="Size：max" size="max"> 页面宽度95% /高度95% </pa-dialog>
  <pa-dialog v-model="visible2" height="default" title="Size：s" size="s"> 页面宽度30%/高度70% </pa-dialog>
  <pa-dialog v-model="visible3" height="default" title="Size：m" size="m"> 页面宽度50%/高度70% </pa-dialog>
  <pa-dialog v-model="visible4" height="default" title="Size：l" size="l"> 页面宽度70%/高度70% </pa-dialog>
  <pa-dialog v-model="visible5" height="200" title="自定义宽度" width="200"> 自定义宽高 </pa-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
</script>

<style></style>

显示代码

高度设置

使用 height 来定义弹窗框高度。

<template>
  <pa-button is="go" @click="visible1 = true">自定义高度数值</pa-button>
  <pa-button is="go" @click="visible2 = true">自定义高度百分比</pa-button>
  <pa-button is="go" @click="visible3 = true">自适应高度</pa-button>

  <pa-dialog v-model="visible1" title="自定义高度" height="200"> 自定义高度：200 </pa-dialog>
  <pa-dialog v-model="visible2" title="自定义高度" height="90%"> 自定义高度：90% </pa-dialog>
  <pa-dialog v-model="visible3" title="自适应高度" height="auto"> 自适应高度 </pa-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
</script>

<style></style>

显示代码

偏移设置

使用 offsetX 与 offsetY 来定义弹窗框位置偏移量。

<template>
  <pa-button is="go" @click="visible1 = true">offsetX:300</pa-button>
  <pa-button is="go" @click="visible2 = true">offsetY:300</pa-button>
  <pa-button is="go" @click="visible3 = true">offsetX:20%</pa-button>
  <pa-button is="go" @click="visible4 = true">offsetY:20%</pa-button>

  <pa-dialog v-model="visible1" title="offsetX设置" offsetX="300"> offsetX:300 </pa-dialog>
  <pa-dialog v-model="visible2" title="offsetY设置" offsetY="300"> offsetY:300 </pa-dialog>
  <pa-dialog v-model="visible3" title="offsetX设置" offsetX="20%"> offsetX:20% </pa-dialog>
  <pa-dialog v-model="visible4" title="offsetY设置" offsetY="20%"> offsetY:20% </pa-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
</script>

<style></style>

显示代码

SaDialogType

属性名	描述	类型	默认值
modelValue	是否打开 Dialog	boolean	false
size	Dialog 尺寸	l m max s	m
height	Dialog 高度	string number "auto" "default"	—
width	Dialog 宽度	string number	—
offsetX	X 轴偏移量	string number	0
offsetY	Y 轴偏移量	string number	0
keepAlive	缓存模式	boolean	false
title	Dialog 标题	string	—
subTitle	Dialog 子标题	string	—
useFull	使用全屏模式	boolean	true
scroll	开启滚动	boolean	true
useScrollX	开启 X 轴滚动	boolean	false
titleAlign	标题对齐方式	center left right	center
closeOnClickModal	点击 Modal 退出	boolean	true
closeOnPressEscape	按下 Esc 退出	boolean	true
padding	内边距	Array<"all" "bottom" "left" "right" "top">	—

使用 插槽位置 展示

描述	字段
Dialog 底部	footer
Dialog 标题	header