Drawer 抽屉
从屏幕边缘滑出的浮层面板。
基本用法
通过 v-model 控制显示/隐藏，默认从右侧滑出。
vue
<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>
<ABtn @click="show = true">右侧抽屉</ABtn>
<ADrawer v-model="show" title="抽屉标题">
这是抽屉的内容区域。
</ADrawer>左侧滑出
设置 placement="left" 从左侧滑出。
vue
<ADrawer v-model="show" placement="left" title="左侧抽屉">
内容
</ADrawer>API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | boolean | false | 是否显示 |
placement | 'left' | 'right' | 'top' | 'bottom' | 'right' | 滑出方向 |
width | string | '300px' | 左右抽屉宽度 |
height | string | '300px' | 上下抽屉高度 |
title | string | — | 标题 |
closable | boolean | true | 是否显示关闭按钮 |
maskClosable | boolean | true | 点击遮罩是否关闭 |
Events
| 名称 | 说明 |
|---|---|
update:modelValue | 显示状态变化 |
open | 打开时触发 |
close | 关闭时触发 |
Slots
| 名称 | 说明 |
|---|---|
default | 主体内容 |
header | 自定义顶部区域 |
交互特性
- 遮罩淡入 + 面板 ease-out 侧滑
- 点击遮罩关闭
- Esc 键关闭
- 打开时锁定 body 滚动