Drawer 抽屉

介绍

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

引入

"usingComponents": {
  "m-drawer": "mind-ui-weapp/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

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

Slot

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