# ui-drawer 抽屉面板组件
版本：v2.3.11
抽屉面板组件用于从屏幕边缘滑出的面板，支持垂直方向（左右）和水平方向（上下），可自定义方向、大小和样式。
# 基本使用
# 垂直方向抽屉（左右）
<template>
<div class="drawer-demo">
<ui-button @click="showRightDrawer = true">右侧抽屉</ui-button>
<ui-button @click="showLeftDrawer = true">左侧抽屉</ui-button>
<!-- 右侧抽屉 -->
<ui-drawer v-model:show="showRightDrawer" title="右侧抽屉">
<div style="padding: 20px;">
这是右侧抽屉的内容区
</div>
</ui-drawer>
<!-- 左侧抽屉 -->
<ui-drawer v-model:show="showLeftDrawer" title="左侧抽屉" direction="left">
<div style="padding: 20px;">
这是左侧抽屉的内容区
</div>
</ui-drawer>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showRightDrawer = ref(false);
const showLeftDrawer = ref(false);
</script>
<style scoped>
.drawer-demo {
padding: 20px;
}
</style>
# 水平方向抽屉（上下）
<template>
<div class="drawer-demo">
<ui-button @click="showBottomDrawer = true">底部抽屉</ui-button>
<ui-button @click="showTopDrawer = true">顶部抽屉</ui-button>
<!-- 底部抽屉 -->
<ui-drawer v-model:show="showBottomDrawer" title="底部抽屉" direction="bottom">
<div style="padding: 20px;">
这是底部抽屉的内容区
</div>
</ui-drawer>
<!-- 顶部抽屉 -->
<ui-drawer v-model:show="showTopDrawer" title="顶部抽屉" direction="top">
<div style="padding: 20px;">
这是顶部抽屉的内容区
</div>
</ui-drawer>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showBottomDrawer = ref(false);
const showTopDrawer = ref(false);
</script>
<style scoped>
.drawer-demo {
padding: 20px;
}
</style>
# Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
show | Boolean | false | 是否显示抽屉 |
title | String | - | 抽屉标题 |
direction | String | 'right' | 抽屉滑出方向，可选值：left、right（垂直方向）、top、bottom（水平方向） |
size | Number/String | '30%' | 抽屉大小，垂直方向为宽度，水平方向为高度，单位：px % |
mask | Boolean | true | 是否显示遮罩 |
maskClosable | Boolean | true | 点击遮罩层是否可关闭抽屉 |
closable | Boolean | true | 是否显示关闭按钮 |
zIndex | Number | 1000 | 抽屉层级 |
# Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
show | 抽屉显示时触发 | - |
hide | 抽屉隐藏时触发 | - |
close | 关闭抽屉时触发 | - |
# Slots
| 名称 | 说明 |
|---|---|
default | 抽屉内容 |
title | 自定义抽屉标题 |
footer | 自定义抽屉底部 |