Dialog 弹层组件

基于 ElementUI el-dialog 封装，支持全屏切换、内容滚动优化、拖拽（可选）以及命令式 API 调用。

基础用法 - CtcDialog

普通组件声明式使用 CtcDialog (对应 packages/dialog/src/Index.vue)。

点击打开 Dialog 这是一段信息 取 消 确 定

hide code

<template>
	<div>
		<el-button type="text" @click="dialogVisible = true"
			>点击打开 Dialog</el-button
		>
		<ctc-dialog
			title="我是标题"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleClose"
			drag
			:radius="[5]"
			wrap-center="center"
			remove-body-padding
			show-fullscreen
		>
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button  size="mini" @click="dialogVisible = false">取 消</el-button>
				<el-button  size="mini" type="primary" @click="dialogVisible = false"
					>确 定</el-button
				>
			</span>
		</ctc-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogVisible: false,
		};
	},
	methods: {
		handleClose(done) {
			done();
		},
	},
};
</script>

命令式调用 - $ctcDialog

支持通过 this.$ctcDialog(options) 快速打开弹层，无需在业务页面声明组件状态。

• 未传 visible 时默认立即打开。
• 推荐使用 component + props、VNode 或纯文本。
• 只有显式传入 unsafeHtml: true 时，字符串内容才会按 HTML 渲染。

const h = this.$createElement;

this.$ctcDialog({
	title: "命令式弹层",
	content: h("div", "Hello World"),
	width: "500px",
	showFullscreen: true,
});

扩展功能

1. 全屏切换

通过设置 showFullscreen 属性可以开启全屏切换按钮（默认关闭）。

• 声明式: <ctc-dialog show-fullscreen :fullscreen.sync="isFullscreen" ...>
• 命令式: this.$ctcDialog({ showFullscreen: true, fullscreen: true, ... })

[!TIP] 如果通过 fullscreen 属性（或 API 参数）开启了初始全屏状态，顶部的切换图标会自动同步显示为“还原”图标。

2. 长内容滚动

组件内部优化了布局，当内容超过 80vh 时，内容区域会自动出现滚动条，而 Header 和 Footer 始终固定。

3. 内容形式 (命令式 API)

命令式 API 支持多种内容载体：

• content: 纯文本或 VNode。
• component: 传入 Vue 组件对象或组件名（通过 component 属性），并通过 props 传参。
• iframeSrc: 传入 URL 地址，以 iframe 形式加载。
• footer: 支持字符串或 VNode。
• unsafeHtml: 仅在渲染可信 HTML 字符串时显式开启。

---

属性 (Props)

支持 el-dialog 的所有属性。以下为扩展或重点属性：

参数	说明	类型	默认值
title	标题	string / VNode	-
showFullscreen	是否显示全屏切换按钮	boolean	false
fullscreen	全屏状态，支持 .sync 修饰符。设置 true 则默认以全屏打开	boolean	false
radius	弹层圆角，支持多种格式： 1. String: '20px' 或 '20px 0' 2. Number: 20 (自动补 px) 3. Array: [20, 0, 20, 0] (自动补 px)	string / number / array	-
top	弹层顶部距离。传入后会自动切换为顶部对齐模式；未传时默认垂直居中。全屏时强制为 0。	string	-
wrapCenter	弹层在容器中的对齐方式，声明式可写成 wrapCenter 或 wrap-center。	string	'center'
removeBodyPadding	是否移除 .el-dialog__body 默认内边距 30px 20px，声明式可写成 removeBodyPadding 或 remove-body-padding。	boolean	false
drag	是否开启拖拽功能。声明式和命令式用法都支持直接传 prop。	boolean	false
destroy-on-close	关闭时是否销毁内部元素	boolean	false

扩展功能

1. 拖拽功能

优先通过 drag prop 开启拖拽；保留 v-drag 兼容旧用法。

<ctc-dialog drag title="可拖拽弹层" :visible.sync="visible">...</ctc-dialog>

2. 布局与内边距

• 未传 top 时，弹层默认垂直居中。
• 传入 top 后，弹层改为顶部偏移布局。
• wrapCenter 作用于外层 wrapper，对声明式用法同时兼容 wrapCenter 和 wrap-center。
• removeBodyPadding 会移除 .el-dialog__body 默认 30px 20px 内边距，对声明式用法同时兼容 removeBodyPadding 和 remove-body-padding。

<ctc-dialog
	:visible.sync="visible"
	:radius="[20, 20, 0, 0]"
	wrap-center="center"
	remove-body-padding
>
	...
</ctc-dialog>

插槽 (Slots)

插槽名	说明
title	标题内容
default	弹层主体内容
footer	底部操作区内容

事件 (Events)

支持 el-dialog 的所有事件，并扩展了：

事件名	说明	参数
fullscreen-change	全屏状态切换时触发	isFullscreen (boolean)
update:fullscreen	全屏状态同步（支持 .sync 指令）	isFullscreen (boolean)