Dialog 对话框

弹出一个对话框。

基本用法

你可以在任意位置弹出一个 Dialog对话框。

查看代码

<template>
	<demo-container>
		<gov-button @click="visible = true">点击打开 Dialog</gov-button>
		<gov-dialog v-model="visible" title="标题" width="30%">
			<div>这是一个 Dialog！</div>
			<template #footer>
				<gov-button @click="visible = false">关闭</gov-button>
			</template>
		</gov-dialog>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

点击遮罩层关闭

默认点击遮罩层关闭，你可以设置 closeOnClickModal 为 false 关闭该功能。

查看代码

<template>
	<demo-container>
		<gov-button @click="visible = true">点击打开 Dialog</gov-button>
		<gov-dialog
			v-model="visible"
			title="标题"
			width="30%"
			:closeOnClickModal="false"
		>
			<div>这是一个 Dialog！点击遮罩层无法关闭哦！</div>
			<template #footer>
				<gov-button @click="visible = false">关闭</gov-button>
			</template>
		</gov-dialog>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

自定义标题

自定义标题内容。

查看代码

<template>
	<demo-container>
		<gov-button @click="visible = true">点击打开 Dialog</gov-button>
		<gov-dialog v-model="visible" width="30%">
			<template #title>
				<div class="gradient-text">这是一个好看的标题</div>
			</template>
			<div>这是一个 Dialog！有自定义标题！</div>
			<template #footer>
				<gov-button @click="visible = false">关闭</gov-button>
			</template>
		</gov-dialog>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

<style lang="scss" scoped>
/* 从紫色到蓝色的渐变 */
.gradient-text {
	background-image: linear-gradient(to right, purple, blue);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}
</style>

设置宽度

定义不同宽度。

查看代码

<template>
	<demo-container>
		<gov-button @click="visible = true">点击打开 Dialog</gov-button>
		<gov-dialog v-model="visible" title="标题" width="600px" top="300px">
			<div>这是一个宽度 600px 居上高度 300px 的 Dialog！</div>
			<template #footer>
				<gov-button @click="visible = false">关闭</gov-button>
			</template>
		</gov-dialog>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

全屏模式

全屏模式可以覆盖整个视觉区域。

查看代码

<template>
	<demo-container>
		<gov-button @click="visible = true">点击打开 Dialog</gov-button>
		<gov-dialog v-model="visible" title="全屏弹窗" fullscreen>
			<div>这是全屏的弹窗，别忘了关闭在右侧。</div>
		</gov-dialog>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const visible = ref(false);
</script>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	控制对话框的显示与隐藏	Boolean	true, false	false
title	对话框标题	String	—	"提示"
closeOnClickModal	点击遮罩层是否关闭对话框	Boolean	true, false	true
showClose	是否显示关闭按钮	Boolean	true, false	true
width	对话框宽度	String	—	"800px"
top	对话框距离顶部的距离	String	—	"15vh"
fullscreen	是否全屏显示	Boolean	true, false	false
customClass	自定义类名	String	—	""
beforeClose	关闭前的回调函数	Function	—	—

Events

事件名	说明	回调参数
change	对话框显示状态改变时触发	—
open	对话框打开时触发	—
opened	对话框打开动画结束后触发	—
close	对话框关闭时触发	—
closed	对话框关闭动画结束后触发	—
update:modelValue	更新对话框显示状态	新的显示状态

Slots

插槽名	说明	作用域插槽	内容
title	自定义对话框标题内容	否	可以放置自定义的标题内容
default	对话框主体内容	否	放置对话框的主要内容
footer	对话框底部内容	否	放置对话框底部的按钮或其他内容