Dialog

基于Element 的el-dialog二次开发的弹窗组件。

基础用法

基础使用方法和Element的el-dialog一致，只是将el-dialog替换为dk-dialog即可。

basic.vue

<template>
  <dk-dialog v-model="dialogVisible" :fullscreen="true" title="标题">
    <div>
      <span>这是一个二次封装的弹出层</span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 确认 </el-button>
      </span>
    </template>
  </dk-dialog>
  <el-button @click="dialogVisible = true">点击显示Dialog</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

继承使用

dk-dialog继承了el-dialog的所有属性和方法，可以直接使用el-dialog的属性和方法。

el-dialog.vue

<template>
  <dk-dialog v-model="dialogVisible" title="标题" :draggable="false" center>
    <span>这是一个二次封装的弹出层</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </dk-dialog>
  <el-button @click="dialogVisible = true">点击显示Dialog</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

继承插槽

dk-dialog继承了el-dialog的所有插槽，可以直接使用el-dialog的插槽。

header.vue

<template>
  <dk-dialog
    v-model="dialogVisible"
    :fullscreen="true"
    title="标题"
    :draggable="false"
  >
    <span>这是一个二次封装的弹出层</span>
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
        <el-button type="danger" @click="close"> Close </el-button>
      </div>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </dk-dialog>
  <el-button @click="dialogVisible = true">点击显示Dialog</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>

<style>
.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>

组件配置

Dialog Props

属性	说明	类型	默认值
fullscreen	是否显示全屏按钮	boolean	false
default-fullscreen	是否默认全屏显示	boolean	false
max-height	最大高度	number	''
model-value / v-model	是否显示 Dialog	boolean	—
title	Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入	string	''
width	对话框的宽度，默认值为 50%	string/ number	''
top	dialog CSS 中的 margin-top 值，默认为 15vh	string	''
modal	是否需要遮罩层	boolean	true
modal-class	遮罩的自定义类名	string	—
append-to-body	Dialog 自身是否插入至 body 元素上。	boolean	false
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	true
custom-class	Dialog 的自定义类名	string	''
open-delay	dialog 打开的延时时间，单位毫秒	number	0
close-delay	drawer 关闭的延时时间，单位毫秒	number	0
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	true
show-close	是否显示关闭按钮	boolean	true
before-close	关闭前的回调，会暂停 Dialog 的关闭.	Function (done: DoneFn) => void`	—
draggable	为 Dialog 启用可拖拽功能	boolean	false
center	是否让 Dialog 的 header 和 footer 部分居中排列	boolean	false
align-center	是否水平垂直对齐对话框	boolean	false
destroy-on-close	当关闭 Dialog 时，销毁其中的元素	boolean	false
close-icon	自定义关闭图标，默认 Close	string/ Component	—
z-index	和原生的 CSS 的 z-index 相同，改变 z 轴的顺序	number	—
header-aria-level	header 的 aria-level 属性	string	2

Dialog Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

Dialog Slots

插槽名	说明
header	头部自定义
footer	底部自定义

类型定义

组件导出以下类型定义

import type {DialogProps} from '@vipl520/dk-ui'