Dialog 对话框
提示
Dialog 基于 Popup 开发,通过 透传 Attributes 可以使用 Popup 的所有属性和方法,该部分API不在此文档中重复,请查阅 Popup文档。
基础用法
vue
<script setup lang="ts">
import { ref } from 'vue';
const visible = ref<Boolean>(false);
</script>
<template>
<s-button @click="visible = true">打开</s-button>
<s-dialog v-model="visible" title="标题" show-close>
<p>测试内容</p>
</s-dialog>
</template>
自定义插槽
vue
<script setup lang="ts">
import { ref } from 'vue';
const visible = ref<Boolean>(false);
</script>
<template>
<s-button @click="visible = true">打开</s-button>
<s-dialog v-model="visible" show-close :close-on-click-overlay="false">
<template #header>
<h4>自定义头部</h4>
</template>
<p>对话框内容</p>
<template #footer>
<s-button type="primary" @click="visible = false">自定义底部按钮</s-button>
</template>
</s-dialog>
</template>
弹出方向
通过 Popup
透传属性 direction
属性的 ttb
rtl
btt
ltr
设定弹出方向,当值为 ''
空时默认居中
vue
<script setup lang="ts">
import { ref } from 'vue';
const direction = ref('');
const visible = ref<Boolean>(false);
</script>
<template>
<s-radio v-model="direction" value="ttb">上</s-radio>
<s-radio v-model="direction" value="rtl">右</s-radio>
<s-radio v-model="direction" value="btt">下</s-radio>
<s-radio v-model="direction" value="ltr">左</s-radio>
<s-button @click="visible = true" style="margin-left: 15px;">打开</s-button>
<s-dialog v-model="visible" title="标题" show-close :direction="direction" :overlay="false">
<p>测试内容</p>
</s-dialog>
</template>
API
Dialog Attributes
部分属性继承 Popup 组件,详情请参考文档
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | '' |
Dialog Slots
名称 | 说明 |
---|---|
header | 顶部标题区域 |
footer | 底部操作区域 |
Dialog Events
名称 | 说明 | 类型 |
---|---|---|
confirm | 弹窗提交回调 | Function |
cancel | 弹窗关闭回调 | Function |
Dialog CSS
名称 | 说明 | 默认值 |
---|---|---|
--s-dialog-width | 宽度 | 30% |
--s-dialog-padding-header | 头部内边距 | 10px |
--s-dialog-padding-body | 内容内边距 | 15px |
--s-dialog-padding-footer | 底部内边距 | 10px |
--s-dialog-border-width | 区域间隔线宽度 | 1px |
--s-dialog-border-style | 区域间隔线样式 | solid |
--s-dialog-border-color | 区域间隔线颜色 | var(--color-border) |