> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/dao-hang/drawer-chou-ti.md).

# Drawer 抽屉

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iDrawer from 'iview-mpvue/dist/components/drawer/drawer'
    export default {
        components: {
            'i-drawer': iDrawer
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/drawer/style/css'
```

## 示例

```markup
<i-button v-on:click="toggleLeft1" type="ghost">左边弹出1</i-button>
<i-button v-on:click="toggleLeft2" type="primary">左边弹出2</i-button>
<i-button v-on:click="toggleRight1" type="ghost">右边弹出1</i-button>
<i-button v-on:click="toggleRight2" type="primary">右边弹出2</i-button>
<i-drawer mode="left" :visible="showLeft1" v-on:click="toggleLeft1">
    <view class="demo-container">
        单击遮罩层关闭
    </view>
</i-drawer>
<i-drawer mode="left" :visible="showLeft2" :mask-closable="false">
    <view class="demo-container">
        禁止单击遮罩关闭
        <i-button v-on:click="toggleLeft2" type="primary">关闭</i-button>
    </view>
</i-drawer>
<i-drawer mode="right" :visible="showRight1" v-on:click="toggleRight1">
    <view class="demo-container">
        单击遮罩层关闭
    </view>
</i-drawer>
<i-drawer mode="right" :visible="showRight2" :mask-closable="false">
    <view class="demo-container">
        禁止单击遮罩关闭
        <i-button v-on:click="toggleRight2" type="primary">关闭</i-button>
    </view>
</i-drawer>
```

```javascript
<script>
    export default {
        ...
        data() {
            return {
                showLeft1: false,
                showLeft2: false,
                showRight1: false,
                showRight2: false
            }
        },
        methods: {
            toggleLeft1() {
                this.showLeft1 = !this.showLeft1
            },
            toggleLeft2() {
                this.showLeft2 = !this.showLeft2
            },
            toggleRight1() {
                this.showRight1 = !this.showRight1
            },
            toggleRight2() {
                this.showRight2 = !this.showRight2
            }
        }
    }
</script>
```

## API

Drawer properties

| 属性            | 说明                     | 类型      | 默认值  |
| ------------- | ---------------------- | ------- | ---- |
| i-class       | 自定义 class 类名           | String  | -    |
| visible       | 是否显示组件                 | String  | -    |
| mode          | 显示位置，可选值为 left 和 right | String  | left |
| mask          | 是否显示遮罩层                | Boolean | true |
| mask-closable | 是否允许点击遮罩层关闭            | Boolean | true |

Drawer events

| 事件名        | 说明    | 返回值 |
| ---------- | ----- | --- |
| v-on:click | 关闭时触发 | -   |