Dialog 对话框

提示

Dialog 基于 Popup 开发，通过 透传 Attributes 可以使用 Popup 的所有属性和方法，该部分API不在此文档中重复，请查阅 Popup文档。

基础用法

标题

测试内容

<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>

自定义插槽

自定义头部

对话框内容

<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 设定弹出方向，当值为 '' 空时默认居中

上

右

下

左

标题

测试内容

<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)