Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空

<template>
  <etu-button text @click="dialogVisible = true"> 点击打开对话框 </etu-button>

  <etu-dialog v-model="dialogVisible" title="Tips" width="30%">
    <span>这里是消息</span>
    <template #footer>
      <span class="dialog-footer">
        <etu-button @click="dialogVisible = false">取消</etu-button>
        <etu-button type="primary" @click="dialogVisible = false">
          确认
        </etu-button>
      </span>
    </template>
  </etu-dialog>
</template>

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

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

<template>
  <etu-button text @click="dialogVisible = true"> 点击打开对话框 </etu-button>

  <etu-dialog v-model="dialogVisible" title="Tips" width="30%">
    <span>这里是消息</span>
    <template #footer>
      <span class="dialog-footer">
        <etu-button @click="dialogVisible = false">取消</etu-button>
        <etu-button type="primary" @click="dialogVisible = false">
          确认
        </etu-button>
      </span>
    </template>
  </etu-dialog>
</template>

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

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

自定义内容

对话框的内容可以是任何东西

<template>
  <etu-button text @click="dialogTableVisible = true">
    点击打开Table对话框
  </etu-button>
  <etu-dialog v-model="dialogTableVisible" title="Shipping address">
    <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
  </etu-dialog>
</template>

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

const dialogTableVisible = ref(false);

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

<template>
  <etu-button text @click="dialogTableVisible = true">
    点击打开Table对话框
  </etu-button>
  <etu-dialog v-model="dialogTableVisible" title="Shipping address">
    <etu-table :columns="columns" :data="tableData" rowKey="name"></etu-table>
  </etu-dialog>
</template>

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

const dialogTableVisible = ref(false);

const tableData = [
  {
    date: "2022-12-13",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-12",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-14",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2022-12-11",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const columns = [
  {
    label: "日期",
    prop: "date",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "地址",
    prop: "address",
    width: 400,
  },
];
</script>

可拖拽对话框

header部分可拖拽

设置draggable属性为true以做到拖拽

<template>
  <etu-button @click="dialogVisible = true">打开dialog</etu-button>
  <etu-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
    <span
      >设置滚动锁定时，由于滚动条消失，页面的宽度会发生改变，我通过模拟计算修正了页面宽度，但是必须设置body的margin为0，否则会看到抖动的情况</span
    >
    <template #footer>
      <span class="dialog-footer">
        <etu-button @click="dialogVisible = false">Cancel</etu-button>
        <etu-button type="primary" @click="dialogVisible = false">
          Confirm
        </etu-button>
      </span>
    </template>
  </etu-dialog>
</template>

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

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

<template>
  <etu-button @click="dialogVisible = true">打开dialog</etu-button>
  <etu-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
    <span
      >设置滚动锁定时，由于滚动条消失，页面的宽度会发生改变，我通过模拟计算修正了页面宽度，但是必须设置body的margin为0，否则会看到抖动的情况</span
    >
    <template #footer>
      <span class="dialog-footer">
        <etu-button @click="dialogVisible = false">Cancel</etu-button>
        <etu-button type="primary" @click="dialogVisible = false">
          Confirm
        </etu-button>
      </span>
    </template>
  </etu-dialog>
</template>

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

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

Dialog属性

属性名	说明	类型	默认值
model-value / v-model	是否显示 Dialog	boolean	—
title	Dialog 对话框 Dialog 的标题，也可通过具名 slot 传入	string	—
width	Dialog 的宽度	string / number	50%
fullscreen	是否为全屏 Dialog	boolean	false
top	Dialog CSS 中的 margin-top 值	string	15vh
modal	是否需要遮罩层	boolean	true
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	true
custom-classdeprecated	Dialog 的自定义类名	string	—
open-delay	Dialog 打开的延时时间，单位毫秒	number	0
close-delay	Dialog 关闭的延时时间，单位毫秒	number	0
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	true
show-close	是否显示关闭按钮	boolean	true
before-close	关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.	Function(done) (done 用来关闭 Dialog)	—
draggable	为 Dialog 启用可拖拽功能	boolean	false
align-center	是否水平垂直对齐对话框	boolean	false
destroy-on-close	当关闭 Dialog 时，销毁其中的元素	boolean	false

Dialog插槽

插槽名	说明
—	Dialog 的内容
header	对话框标题的内容；会替换标题部分，但不会移除关闭按钮。
footer	Dialog 按钮操作区的内容

Dialog事件

事件名	说明	参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—

Dialog 对话框 #

基础用法 #

自定义内容 #

可拖拽对话框 #

Dialog属性 #

Dialog插槽 #

Dialog事件 #