Dialog 对话框

介绍

对话框组件，允许你在弹出简单的对话框，或者在对话框中插入自定义内容。

导入

import Dialog from '@/components/dialog/Dialog.vue'

用法

基础用法

最简单的对话框，只包含标题和内容。

<template>
  <Dialog
    :show="show1"
    @close="show1 = false"
    closeable
    title="提示"
    content="这是一个对话框"
  />
</template>

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

const show1 = ref(false);
</script>

确认对话框

显示取消按钮，让用户可以取消操作。

<template>
  <Dialog
    :show="show2"
    @close="show2 = false"
    showCancel
    closeable
    title="提示"
    content="确认执行操作?"
  />
</template>

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

const show2 = ref(false);
</script>

图标对话框

在对话框中显示图标，增强视觉效果。

<template>
  <Dialog
    :show="show6"
    @close="show6 = false"
    icon="success-filling"
    iconColor="success"
    closeable
    content="已成功提交，请注意查收信息"
  />
</template>

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

const show6 = ref(false);
</script>

超长文字对话框

当内容过长时，对话框会自动启用滚动功能。

<template>
  <Dialog
    :show="show3"
    @close="show3 = false"
    showCancel
    closeable
    title="超长文字"
    content="视频提供了功能强大的方法帮助您证明您的观点。当您单击联机视频时，可以在想要添加的视频的嵌入代码中进行粘贴。您也可以键入一个关键字以联机搜索最适合您的文档的视频。    为使您的文档具有专业外观，Word 提供了页眉、页脚、封面和文本框设计，这些设计可互为补充。例如，您可以添加匹配的封面、页眉和提要栏。单击“插入”，然后从不同库中选择所需元素。    主题和样式也有助于文档保持协调。当您单击设计并选择新的主题时，图片、图表或 SmartArt 图形将会更改以匹配新的主题。当应用样式时，您的标题会进行更改以匹配新的主题。    使用在需要位置出现的新按钮在 Word 中保存时间。若要更改图片适应文档的方式，请单击该图片，图片旁边将会显示布局选项按钮。当处理表格时，单击要添加行或列的位置，然后单击加号。    在新的阅读视图中阅读更加容易。可以折叠文档某些部分并关注所需文本。如果在达到结尾处之前需要停止读取，Word 会记住您的停止位置 - 即使在另一个设备上。视频提供了功能强大的方法帮助您证明您的观点。当您单击联机视频时，可以在想要添加的视频的嵌入代码中进行粘贴。您也可以键入一个关键字以联机搜索最适合您的文档的视频。    为使您的文档具有专业外观，Word 提供了页眉、页脚、封面和文本框设计，这些设计可互为补充。例如，您可以添加匹配的封面、页眉和提要栏。单击“插入”，然后从不同库中选择所需元素。    主题和样式也有助于文档保持协调。当您单击设计并选择新的主题时，图片、图表或 SmartArt 图形将会更改以匹配新的主题。当应用样式时，您的标题会进行更改以匹配新的主题。    使用在需要位置出现的新按钮在 Word 中保存时间。若要更改图片适应文档的方式，请单击该图片，图片旁边将会显示布局选项按钮。当处理表格时，单击要添加行或列的位置，然后单击加号。    在新的阅读视图中阅读更加容易。可以折叠文档某些部分并关注所需文本。如果在达到结尾处之前需要停止读取，Word 会记住您的停止位置 - 即使在另一个设备上。    ?"
  />
</template>

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

const show3 = ref(false);
</script>

自定义对话框内容

使用插槽自定义对话框的内容。

<template>
  <Dialog
    :show="show4"
    @close="show4 = false"
    showCancel
    closeable
    title="自定义对话框内容"
  >
    <template #content>
      <FlexCol center :padding="10">
        <Image :src="'https://imengyu.top/assets/images/test/1.jpg'" width="100" height="200" />
        <Text>视频提供了功能强大的方法帮助您证明您的观点。当您单击联机视频时，可以在想要添加的视频的嵌入代码中进行粘贴。您也可以键入一个关键字以联机搜索最适合您的文档的视频。    为使您的文档具有专业外观，Word 提供了页眉、页脚、封面和文本框设计，这些设计可互为补充。</Text>
      </FlexCol>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';

const show4 = ref(false);
</script>

异步关闭对话框

通过返回 Promise 可以实现异步关闭对话框。

<template>
  <Dialog
    :show="show5"
    @close="show5 = false"
    showCancel
    closeable
    :width="400"
    title="确认执行操作?"
    content="返回一个 Promise 可以异步关闭对话框"
    :onConfirm="asyncClose"
  />
</template>

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

const show5 = ref(false);

function asyncClose() {
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  })
}
</script>

多选项对话框

通过 customButtons 属性添加多个自定义按钮。

<template>
  <Dialog
    :show="show7"
    @close="show7 = false"
    :showConfirm="false"
    :customButtons="[
      {
        name: '1',
        text: '选项1',
        color: 'primary',
      },
      {
        name: '2',
        text: '选项2',
        color: 'primary',
      },
      {
        name: '3',
        text: '选项3',
      },
      {
        name: '4',
        text: '危险选项',
        color: 'danger',
        bold: true,
      },
    ]"
    bottomVertical
    closeable
    title="提示"
    content="确认执行操作?"
  />
</template>

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

const show7 = ref(false);
</script>

自定义对话框

关于详细实例，请参考示例源代码中的 src\pages\feedback\dialog.vue 文件。

API 参考

Dialog

对话框组件。

Props

名称	说明	类型	必填	默认值
title	对话框的标题	string	-	-
icon	对话框的图标，显示在标题上方，同 Icon 组件的图标名字。	string	-	-
iconColor	图标的颜色	string	-	primary
iconSize	图标大小	number	-	40
content	对话框的内容	string	-	-
contentScroll	对话框内容超高后是否自动滚动	boolean	-	true
contentScrollMaxHeight	对话框内容自动滚动超高高度	number | string	-	75%
contentPadding	对话框内容框边距。支持数字或者数组: 如果是数字，则设置所有方向边距；两位数组 [vetical,horizontal]；四位数组 [top,right,down,left]	number | number[]	-	[ 15, 20 ]
bottomVertical	底部按扭是否垂直排版	boolean	-	false
cancelText	取消按扭的文字	string | undefined	-	取消
confirmText	确定按扭的文字	string | undefined	-	确定
confirmColor	确定按扭文字的颜色	string | undefined	-	primary
cancelColor	取消按扭文字的颜色	string | undefined	-	text.content
customButtons	自定义其他按扭，这些按扭将在 cancel 和 confirm 之间显示，建议设置 bottomVertical 使按扭垂直排列。	{ name: string, text: string, color?: string | undefined, bold?: boolean }[]	-	-
showCancel	是否显示取消按扭	boolean	-	false
showConfirm	是否显示确定按扭	boolean	-	true
width	对话框宽度	number | undefined	-	-
mask	是否显示遮罩层	boolean	-	true

Slots

名称	说明
default	默认插槽，用于自定义整个对话框内容
icon	图标插槽
title	标题插槽
content	内容插槽
bottomContent	底部内容插槽

Events

名称	说明	参数
close	当对话框关闭时的回调	void
cancel	当对话框点击取消时的回调	void | Promise<void>
confirm	当对话框点击确定的回调	(buttonName?: string) => void | Promise<void>

主题变量

名称	类型	默认值	说明
DialogMinWidth	number	400	对话框最小宽度
DialogMaxWidth	number	700	对话框最大宽度
DialogIconMarginTop	number	16	图标上外边距
DialogIconMarginBottom	number	12	图标下外边距
DialogTitleFontSize	number	36	标题字体大小
DialogTitleColor	string	text.content	标题颜色
DialogTitleFontWeight	number | string	bold	标题字重
DialogTitleMarginBottom	number	20	标题下外边距
DialogContentTextFontSize	number	28	内容文字字体大小
DialogContentTextColor	string	text.second	内容文字颜色
DialogContentTextAlign	string	center	内容文字对齐方式
DialogCancelColor	string	text.content	取消按钮颜色
DialogConfirmColor	string	primary	确认按钮颜色
DialogIconSize	number	70	图标大小
DialogIconColor	string	primary	图标颜色
DialogContentScrollMaxHeight	string	1000rpx	内容滚动最大高度
DialogContentPadding	number[]	[ 30, 40 ]	内容内边距