Drawer 抽屉

从页面左侧或右侧弹出自定义内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 抽屉内容 -->
<fui-drawer :show="showDrawer" direction="right" @close="showDrawer = false">
  <view>抽屉内容</view>
</fui-drawer>

在页面数据中声明 showDrawer，并通过修改该值控制抽屉显示。

属性

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
direction	String	打开方向：left 或 right	right
background	String	抽屉背景色	#fff
zIndex	Number / String	层级，nvue 不支持	996
maskClosable	Boolean	点击遮罩时是否触发关闭事件	true
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
radius	Number / String	抽屉内侧圆角，单位 rpx	0

事件

事件	说明	回调参数
close	点击可关闭的遮罩	{}

父组件需将 show 设为 false；nvue 中元素顺序影响层级。

插槽

插槽	说明
default	抽屉内显示的内容