Drawer 抽屉组件

基于 ElementUI el-drawer 封装。

基础用法 - CtcDrawer

普通组件使用 CtcDrawer (对应 packages/drawer/src/Index.vue)。

点我打开 我来啦!

hide code

<template>

<div>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
<ctc-drawer
			title="我是标题"
			:visible.sync="drawer"
			:direction="direction"
			:before-close="handleClose"
		>
<span>我来啦!</span>
</ctc-drawer>
</div>
</template>

<script>
export default {
	data() {
		return {
			drawer: false,
			direction: "rtl",
		};
	},
	methods: {
		handleClose(done) {
			this.$confirm("确认关闭？")
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
	},
};
</script>

CtcDrawer 属性 (Props)

支持 el-drawer 的所有属性。

扩展属性:

• showType: 显示类型，默认 'content'。
• size: 支持 px 或 %，组件内部处理了宽度溢出的情况。
• radius: 抽屉圆角。支持 Number, String, Array。对于侧边抽屉，建议使用数组如 [20, 0, 0, 20] (顺时针顺序：左上，右上，右下，左下) 以仅设置内侧圆角。
• showFullscreen: 是否显示全屏按钮。
• fullscreen: 全屏状态 (支持 .sync)。

QtcDrawer 插槽 (Slots)

• title: 标题插槽。
• default: 内容插槽。
• footer: 底部插槽 (会自动添加 footer-fixed 样式)。

CtcDrawer 事件 (Events)

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

透传事件: 支持 el-drawer 的所有事件 (如 open, close 等)。

高级用法 - DrawerTemplate

DrawerTemplate (对应 packages/drawer/src/DrawerTpl.vue)，包含 iframe 加载、动态组件等高级功能。

DrawerTemplate 属性 (Props)

参数	说明	类型	默认值
visible	是否显示 Drawer，支持 .sync 修饰符	boolean	false
title	Drawer 的标题	string	-
size	Drawer 窗体的大小	number / string	'30%'
direction	Drawer 打开的方向	string	'rtl'
modal	是否需要遮罩层	boolean	true
modal-append-to-body	遮罩层是否插入至 body 元素上	boolean	true
append-to-body	Drawer 自身是否插入至 body 元素上	boolean	false
wrapperClosable	点击遮罩层是否可以关闭 Drawer	boolean	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	true
show-close	是否显示关闭按钮	boolean	true
destroy-on-close	控制是否在关闭 Drawer 之后将子元素全部销毁	boolean	false
withHeader	控制是否显示 header 栏	boolean	true
content	普通文本内容 (v-html 渲染)	string	''
component	动态组件名称/对象	string/Object	''
iframeSrc	iframe 地址 url	string	''
footer	底部内容 (v-html 渲染)	string	''
radius	圆角大小	number / string / array	-
showFullscreen	是否显示全屏按钮	boolean	false
fullscreen	全屏状态	boolean	false

DrawerTemplate 事件 (Events)

事件名	说明	参数
open	Drawer 打开的回调	-
opened	Drawer 打开动画结束时的回调	-
close	Drawer 关闭的回调	-
closed	Drawer 关闭动画结束时的回调	-