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"
            v-drag
            radius="5px"
            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) 快速打开弹层，无需在业务页面声明组件状态。

this.$ctcDialog({
	title: "命令式弹层",
	content: "Hello World",
	width: "500px",
	showFullscreen: true,
	fn: {
		confirm() {
			console.log("确认按钮点击");
		},
	},
});

扩展功能

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: 纯文本或 HTML 字符串。
• component: 传入 Vue 组件对象或组件名（通过 component 属性）。
• iframeSrc: 传入 URL 地址，以 iframe 形式加载。

---

属性 (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	'0'
wrapCenter	弹层在容器中的对齐方式	string	'center'
destroy-on-close	关闭时是否销毁内部元素	boolean	false

扩展功能

1. 拖拽功能 (v-drag)

通过 v-drag 指令开启拖拽功能。

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

插槽 (Slots)

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

事件 (Events)

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

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