Drawer 抽屉

介绍

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

引入

import { Drawer } from 'mind-ui-vue';
Vue.use(Drawer);

示例

基础用法

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

<m-button @click="visible = true">左边弹出</m-button>

<m-drawer position="left" :visible="visible" @close="closeDrawer">
  <div class="container">自定义内容</div>
</m-drawer>

export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    closeDrawer() {
      this.visible = false;
    }
  }
}

弹出层位置

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

<m-drawer position="left" :visible="visible" @close="closeDrawer"></m-drawer>

Api

Props

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

Events

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

Slots

名称	说明
—	抽屉内容