Drawer 抽屉

有些时候，Dialog 组件并不满足我们的需求，比如你的表单很长，亦或是你需要临时展示一些文档。

基础用法

呼出一个临时的侧边栏，可以从四个方向触发。

自定义方向

你可以通过 direction 属性来改变抽屉打开的方向。

✨ 浮动风格 (Unique)

Fyoimiya UI 的抽屉组件支持独特的浮动风格。设置 floating 属性可以让抽屉悬浮在页面之上，而不是紧贴边缘。配合 round 属性使用，可以获得更加现代的视觉体验。

🔮 毛玻璃效果 (Unique)

在现代 UI 设计中，毛玻璃（Glass Morphism）是一种流行的设计趋势。设置 glass 属性，让你的抽屉拥有半透明的模糊背景效果。建议配合 floating 使用。

🎯 目标模糊 (Unique)

为了更好地引导用户视线，我们提供了 blur-target 属性。你可以指定一个 CSS 选择器（如 #app 或 .main-content），当抽屉打开时，该目标区域会自动应用模糊滤镜。这比传统的全屏黑色遮罩更具沉浸感。

↔️ 可拖拽宽度

设置 draggable 属性，可以让用户通过拖拽边缘来改变抽屉的宽度。

🪜 嵌套抽屉

你可以在抽屉里再打开一个抽屉。为了保证层级正确，内部的抽屉建议设置 append-to-body 为 true。

🎯 指定挂载容器

你可以通过 target 属性指定抽屉挂载的 DOM 节点。这允许你将抽屉局限在页面的某个特定区域内。

API

Drawer 属性

属性名	说明	类型	默认值
model-value / v-model	是否显示抽屉	boolean	false
title	抽屉标题，也可通过具名 slot 传入	string	—
direction	打开方向	'rtl' | 'ltr' | 'ttb' | 'btt'	'rtl'
size	抽屉尺寸，可以是百分比或像素值	string | number	'30%'
modal	是否需要遮罩层	boolean	true
show-close	是否显示关闭按钮	boolean	true
before-close	关闭前的回调，会暂停 Drawer 的关闭	(done: () => void) => void	—
close-on-click-modal	是否可以通过点击 modal 关闭 Drawer	boolean	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Drawer	boolean	true
with-header	是否显示标题栏	boolean	true
destroy-on-close	控制是否在关闭 Drawer 之后将子元素全部销毁	boolean	false
floating	是否开启浮动模式（悬浮不贴边）	boolean	false
round	是否开启圆角样式	boolean	false
glass	是否开启毛玻璃效果	boolean	false
blur-target	指定打开时需要模糊的 DOM 元素选择器	string	—
draggable	是否开启拖拽宽度	boolean	false
target	指定挂载的 DOM 节点选择器	string	'body'

Drawer 插槽

插槽名	说明
default	抽屉的内容
header	抽屉标题的内容；如果设置了 title 属性，该插槽会被忽略
footer	抽屉页脚的内容

Drawer 事件

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