Drawer 抽屉

抽屉组件，从屏幕边缘滑出，支持推拉手势关闭、模态层过渡动画。closeOnOverlayClick 默认 false，默认禁止点击遮罩关闭。

抽屉组件，从屏幕边缘滑出的浮层面，支持 v-model:visible 双向绑定。支持推拉手势关闭，模态层过渡动画。

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="openDrawer">打开抽屉</re-button>
  <re-drawer :key="current" :visible="visible" :placement="currentConfig.placement" :showOverlay="currentConfig.showOverlay" :closeOnOverlayClick="currentConfig.closeOnOverlayClick" :swipeable="currentConfig.swipeable" :destroyOnClose="currentConfig.destroyOnClose" :width="currentConfig.width" :customStyle="currentConfig.customStyle" @close="onClose" @open="onOpen" @visible-change="onVisibleChange" >
  <re-button theme="default" size="small" @click="closeDrawer">

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-drawer />。

API

Drawer Props

名称类型默认值描述必传
visiblebooleanfalse是否显示抽屉，支持 v-model:visibleN
placement"left" | "right""right"抽屉方向，可选值：left/rightN
showOverlaybooleantrue是否显示遮罩层N
destroyOnClosebooleanfalse关闭时是否销毁子组件N
widthstring"280px"抽屉宽度N
customStylestring""自定义样式N
closeOnOverlayClickbooleanfalse是否允许点击遮罩层关闭抽屉N
swipeablebooleantrue是否支持推拉手势关闭抽屉N

Drawer Events

名称参数描述
close-关闭抽屉时触发
open-打开抽屉时触发
visible-changevisible: boolean抽屉显隐变化时触发，参数为当前是否可见
update:visiblevisible: boolean抽屉显隐变化时触发，参数为当前是否可见

Drawer Slots

名称描述
default默认插槽
Dialog 对话框
用于显示重要信息或需要用户确认操作的模态对话框
DropdownMenu 下拉菜单
菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。