high-mini/components/uni-drawer

Drawer 抽屉

代码块： uDrawer

抽屉侧滑菜单。

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• width 属性仅在 vue 页面生效，nvue 页面因性能问题，不支持动态设置宽度，如需修改，请下载组件修改源码

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

在 template 中使用组件

<uni-drawer :visible="true">
    <view style="padding:15px;">
        <view class="uni-title">抽屉式导航</view>
    </view>
</uni-drawer>

API

Drawer Props

属性名	类型	默认值	说明
mask	Boolean	true	是否显示遮罩
maskClick	Boolean	true	点击遮罩是否可以关闭抽屉
mode	String	left	Drawe滑出位置，可选值：left（从左侧滑出）， right（从右侧滑出）
width	Number	220	Drawe 宽度，仅vue页面设置生效

Drawer Events

事件名	说明	返回值
@change	抽屉状态发生变化触发事件	true：抽屉已经打开；false：抽屉已经关闭；

Drawer Methods

方法称名	说明	参数
open	打开抽屉	-
close	关闭抽屉	-