Tui

0.7.2
Drawer 抽屉组件
Drawer 用于在当前页面弹出，常用于展示信息、操作确认或承载交互表单。
基础用法
最简单的用法，通过 v-model 控制模态框的显示和隐藏。
示例代码
vue
自定义尺寸和样式
展示如何自定义抽屉的宽度、高度，以及禁用默认的关闭按钮和遮罩点击关闭功能。

自定义尺寸和样式

示例代码
vue
表单抽屉
在抽屉中放置表单内容，适用于用户信息录入、设置配置等场景。

表单抽屉

示例代码
vue
嵌套抽屉
演示多层抽屉的嵌套使用，支持在抽屉内打开另一个抽屉。

嵌套抽屉

示例代码
vue
事件监听
展示抽屉的打开和关闭事件监听，以及事件处理的实际应用。

事件监听

示例代码
vue
beforeClose 关闭前拦截
通过 beforeClose 在关闭前拦截，支持区分关闭来源（关闭按钮、遮罩、Esc）并可返回 Promise。
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
modelValue
是否显示
boolean
false
width
宽度
string
400px
height
高度
string
auto
maskClosable
点击遮罩层是否关闭
boolean | string | Null
true
added 0.7.0
closeOnEsc
按 Esc 是否关闭（仅抽屉显示时生效）
boolean
true
added 0.6.5
showClose
是否显示关闭按钮
boolean
true
placement
抽屉位置
top | right | bottom | left
right
canTeleport
是否挂载到body
boolean
false
added 0.7.1, 嵌套时必须为true
beforeClose
关闭前回调，返回 `false` 或 Promise resolve `false` 可阻止关闭
(context: { source: 'close-button' | 'mask' | 'esc' }) => boolean | void | Promise<boolean | void>
—
added 0.6.8
closeOnClickMask
点击遮罩层是否关闭
boolean | string | Null
true
deprecated 0.7.0
事件 Events
事件名
说明
回调参数
版本说明
close
真正关闭时触发（beforeClose 允许后）
插槽 Slots
插槽名
说明
版本说明
default
自定义 content 内容
close
自定义 close 按钮内容
基础用法
自定义尺寸和样式
表单抽屉
嵌套抽屉
事件监听
beforeClose 关闭前拦截
属性 Props
事件 Events
插槽 Slots