Skip to content

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)