Dialog 弹窗

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

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

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

显示代码

vue

<template>
	<div class="dialog-content dialog-basic">
		<ued-button @click="visible = true">打开弹窗</ued-button>
		<ued-dialog
			v-model="visible"
			title="普通弹窗"
			width="500"
			top="5vh"
			:before-close="beforeClose"
		>
			<span>普通弹窗</span>
			<template #footer>
				<div class="dialog-footer">
					<ued-button @click="visible = false">Cancel</ued-button>
					<ued-button type="primary" @click="visible = false">
						Confirm
					</ued-button>
				</div>
			</template>
		</ued-dialog>
	</div>
</template>

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

type DoneFn = (cancel?: boolean) => void
const beforeClose = (done: DoneFn) => {
	console.log('关闭前执行')
	done()
}
</script>

全屏弹窗

设置fullscreen属性可以实现全屏弹窗,此时top、draggable失效, lock-scroll设置为false,Dialog 出现时将 body 滚动将不会被锁定

显示代码

vue

<template>
	<div class="dialog-content dialog-fullscreen">
		<ued-button @click="fullscreenVisible = true">打开全屏弹窗</ued-button>
		<ued-dialog v-model="fullscreenVisible" title="全屏弹窗" fullscreen>
			<span>全屏弹窗</span>
			<template #footer>
				<div class="dialog-footer">
					<ued-button @click="fullscreenVisible = false">Cancel</ued-button>
					<ued-button type="primary" @click="fullscreenVisible = false">
						Confirm
					</ued-button>
				</div>
			</template>
		</ued-dialog>
	</div>
</template>

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

关闭遮罩

设置 modal 可以控制弹窗遮罩是否展示

显示代码

vue

<template>
	<div class="dialog-content dialog-modal">
		<ued-button @click="modalVisible = true">打开无遮罩弹窗</ued-button>
		<ued-dialog v-model="modalVisible" title="无遮罩弹窗" :modal="false">
			<span>无遮罩弹窗</span>
		</ued-dialog>
	</div>
</template>

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

居中弹框

设置center属性可以设置 header,footer的内容居中
设置align-center属性可以设置Dialog出现在屏幕中间

显示代码

vue

<template>
	<div class="dialog-content dialog-center">
		<ued-button @click="centerVisible = true">打开内容居中弹窗</ued-button>
		<ued-button @click="dialogCenterVisible = true">打开居中弹窗</ued-button>
		<ued-dialog v-model="centerVisible" title="内容居中弹窗" center>
			<span>内容居中弹窗</span>
			<template #footer>
				<div class="dialog-footer">
					<ued-button @click="centerVisible = false">Cancel</ued-button>
					<ued-button type="primary" @click="centerVisible = false">
						Confirm
					</ued-button>
				</div>
			</template>
		</ued-dialog>
		<ued-dialog v-model="dialogCenterVisible" title="居中弹框" align-center>
			<span>居中弹框</span>
		</ued-dialog>
	</div>
</template>

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

延时弹窗

设置open-dalay属性可以使弹窗延时打开
设置close-dalay属性可以使弹窗延时关闭

显示代码

vue

<template>
	<div class="dialog-content dialog-delay">
		<ued-button @click="openDelayVisible = true">打开延迟弹窗</ued-button>
		<ued-dialog
			v-model="openDelayVisible"
			title="延时弹窗"
			:open-delay="1000"
			:close-delay="1000"
		>
			<span>延时弹窗</span>
		</ued-dialog>
	</div>
</template>

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

可拖拽弹窗

设置draggable可以自由拖拽弹窗
设置overflow可以拖拽出屏幕，draggable为true时才生效

显示代码

vue

<template>
	<div class="dialog-content dialog-draggable">
		<ued-button @click="openDraggableVisible = true">打开可拖拽弹窗</ued-button>
		<ued-button @click="openDraggableOverflowVisible = true">
			打开可拖拽弹窗(overflow)
		</ued-button>
		<ued-dialog v-model="openDraggableVisible" title="可拖拽弹窗" draggable>
			<span>可拖拽弹窗</span>
		</ued-dialog>
		<ued-dialog
			v-model="openDraggableOverflowVisible"
			title="打开可拖拽弹窗(overflow)"
			draggable
			overflow
		>
			<span>打开可拖拽弹窗(overflow)</span>
		</ued-dialog>
	</div>
</template>

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

自定义关闭Icon

设置close-icon属性可以自定义关闭Icon图标，可以传字符串或者Icon组件

显示代码

vue

<template>
	<div class="dialog-content dialog-close-icon">
		<ued-button @click="closeIconVisible1 = true">
			打开自定义关闭Icon弹窗
		</ued-button>
		<ued-button @click="closeIconVisible2 = true">
			打开自定义关闭Icon弹窗
		</ued-button>
		<ued-dialog
			v-model="closeIconVisible1"
			title="自定义关闭Icon弹窗"
			close-icon="Check"
		>
			<span>自定义关闭Icon弹窗</span>
		</ued-dialog>
		<ued-dialog
			v-model="closeIconVisible2"
			title="自定义关闭Icon弹窗"
			:close-icon="Star"
		>
			<span>自定义关闭Icon弹窗</span>
		</ued-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Star } from '@ued-plus/components'
const closeIconVisible1 = ref(false)
const closeIconVisible2 = ref(false)
</script>

执行时机

open: Dialog 打开的回调

opened: Dialog 打开动画结束时的回调

close: Dialog 关闭的回调

closed: Dialog 关闭动画结束时的回调

显示代码

vue

<template>
	<div class="dialog-content dialog-event">
		<ued-button @click="eventVisible = true">打开执行时机弹窗</ued-button>
		<ued-dialog
			v-model="eventVisible"
			title="执行时机弹窗"
			@open="open"
			@opened="opened"
			@close="close"
			@closed="closed"
		>
			<span>{{ content }}</span>
		</ued-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const eventVisible = ref(false)
const content = ref('')
const open = () => {
	content.value = 'open'
}
const opened = () => {
	content.value = 'opened'
}
const close = () => {
	console.log('close')
}
const closed = () => {
	console.log('closed')
}
</script>

自定义头部

使用 header slot 可以自定义头部的title，从 header slot 属性中取得 titleClass属性可以定义默认title样式

使用 show-close关闭自带closeIcon，从 header slot 属性中取得 close方法，原closeIcon一样关闭弹窗的方法

显示代码

vue

<template>
	<div class="dialog-content dialog-header">
		<ued-button @click="headerVisible = true">打开自定义头部弹窗</ued-button>
		<ued-button @click="customHeaderVisible = true">
			打开全自定义头部弹窗
		</ued-button>
		<ued-dialog v-model="headerVisible">
			<template #header>
				<h4>自定义头部</h4>
			</template>
		</ued-dialog>
		<ued-dialog v-model="customHeaderVisible" :show-close="false">
			<template #header="{ close, titleClass }">
				<div class="my-header">
					<h4 :class="titleClass">全自定义头部</h4>
					<ued-button type="danger" @click="close">
						<ued-icon class="ued-icon--left"><CirclePlus /></ued-icon>
						Close
					</ued-button>
				</div>
			</template>
			<span>自定义头部弹窗</span>
		</ued-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CirclePlus } from '@ued-plus/components'
const headerVisible = ref(false)
const customHeaderVisible = ref(false)
</script>

<style lang="scss" scoped>
.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
}
</style>

嵌套弹窗

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用append-to-body 属性。

通常我们不建议使用嵌套对话框。如果你需要在页面上呈现多个对话框，你可以简单地打平它们，以便它们彼此之间是平级关系。如果必须要在一个对话框内展示另一个对话框，可以将内部嵌套的对话框属性 append-to-body 设置为 true，嵌套的对话框将附加到 body 而不是其父节点，这样两个对话框都可以被正确地渲染。

为保证 Dialog 出现时将 body 滚动锁定功能正常，嵌套的dialog需要设置lock-scroll为false

显示代码

vue

<template>
	<div class="dialog-content dialog-nested">
		<ued-button @click="outerVisible = true">打开嵌套弹窗</ued-button>
		<ued-dialog v-model="outerVisible" title="嵌套外弹窗" width="800">
			<span>嵌套外弹窗</span>
			<ued-dialog
				v-model="innerVisible"
				width="500"
				title="嵌套内弹窗"
				:lock-scroll="false"
				append-to-body
			>
				<span>嵌套内弹窗</span>
			</ued-dialog>
			<template #footer>
				<div class="dialog-footer">
					<ued-button @click="outerVisible = false">取消</ued-button>
					<ued-button type="primary" @click="innerVisible = true">
						打开嵌套内弹窗
					</ued-button>
				</div>
			</template>
		</ued-dialog>
	</div>
</template>

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

API

属性

属性名	说明	类型	默认值
model-value/v-model	是否显示 Dialog	`boolean`	-
title	对话框的标题,可通过具名slot传入	`string`	-
width	对话框的宽度，默认值为 50%	`string`/`number`	''
fullscreen	是否为全屏 Dialog	`boolean`	`false`
top	margin-top 值，默认为 15vh	`string`	`15vh`
modal	是否需要遮罩层	`boolean`	`true`
modal-class	遮罩的自定义类名	`string`	-
append-to-body	自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	`boolean`	`false`
append-to	Dialog 挂载到哪个 DOM 元素将覆盖 append-to-body	`string`	`body`
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	`boolean`	`true`
open-delay	dialog 打开的延时时间，单位毫秒	`number`	`0`
close-delay	dialog 关闭的延时时间，单位毫秒	`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 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.	`(done: DoneFn) => void`	-
draggable	为 Dialog 启用可拖拽功能	`boolean`	`fasle`
overflow	拖动范围可以超出可视区	`boolean`	`fasle`
center	是否让 Dialog 的 header 和 footer 部分居中排列	`boolean`	`fasle`
align-center	是否水平垂直对齐对话框	`boolean`	`fasle`
close-icon	自定义关闭图标，默认 Close	`string`/`Component`	-
z-index	和原生的 CSS 的 z-index 相同，改变 z 轴的顺序	`number`	-

插槽

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

事件

事件名	说明	类型
open	Dialog 打开的回调	`() => void`
opened	Dialog 打开动画结束时的回调	`() => void`
close	Dialog 关闭的回调	`() => void`
closed	Dialog 关闭动画结束时的回调	`() => void`

Dialog 弹窗 ​

基础用法 ​

全屏弹窗 ​

关闭遮罩 ​

居中弹框 ​

延时弹窗 ​

可拖拽弹窗 ​

自定义关闭Icon ​

执行时机 ​

自定义头部 ​

嵌套弹窗 ​

API ​

属性 ​

插槽 ​

事件 ​

Dialog 弹窗

基础用法

全屏弹窗

关闭遮罩

居中弹框

延时弹窗

可拖拽弹窗

自定义关闭Icon

执行时机

自定义头部

嵌套弹窗

API

属性

插槽

事件