## Drawer 抽屉
> 代码块: `uDrawer`


抽屉侧滑菜单。

> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - `width` 属性仅在 `vue` 页面生效,`nvue` 页面因性能问题,不支持动态设置宽度,如需修改,请下载组件修改源码


### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。

如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)

### 基本用法


在 ``template`` 中使用组件

```html
<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	|关闭抽屉	|-|