Mind UI

# Drawer 抽屉

# 介绍

抽屉容器，可以从多个方向展示一个侧边栏。

# 引入

"usingComponents": {
  "m-drawer": "/dist/drawer/index"
}

# 示例

# 基础用法

通过 visible 控制弹出层是否展示。

<m-button bind:click="showDrawer">左边弹出</m-button>

<m-drawer position="left" visible="{{ visible }}" bind:close="closeDrawer">
  <view class="container">左边弹出</view>
</m-drawer>

Page({
  data: {
    visible: false
  },

  showDrawer() {
    this.setData({
      visible: true
    })
  },

  closeDrawer() {

  }
});

# 弹出层位置

通过 position 属性设置弹出位置，可以设置为 top、bottom、left、right。

<m-drawer position="left" visible="{{ visible }}" bind:close="closeDrawer"></m-drawer>

# 点击蒙层不可关闭

设置 mask-closable = false ，取消点击蒙层关闭功能。

<m-drawer position="bottom" visible="{{ visible }}" mask-closable="{{ false }}">
  <m-button bind:click="closeDrawer">点我关闭</m-button>
</m-drawer>

Page({
  data: {
    visible: false,
  },

  closeDrawer() {
    this.setData({
      visible: false
    })
  }
});

# Properties

参数 说明 类型 可选值 默认值
custom-class 自定义样式类名 String — —
visible 是否显示组件 Boolean — false
position 弹出位置 String left right top bottom bottom
mask 是否显示遮罩层 Boolean — true
mask-closable 是否允许点击遮罩层关闭 Boolean — true

# Event

方法名称 说明
close drawer 关闭时回调

# Slot

名称 说明
— 自定义弹出框内容

← Swipeout 滑动菜单 →