Drawer 抽屉 pass 0.0.13+

基础用法

可设置四个方向滑出，内容自定义填充
ps: <mg-drawer/> 的样式可以通过 drawerStyleObj 设置

left right top bottom

展开查看

<template>
  <label v-for="i in ['left','right','top','bottom']">
    <input type="radio" v-model="position" name="p" :value="i">
    {{ i }}
  </label>
  <mg-button @click="show = true">点击打开</mg-button>

  <mg-drawer v-model="show" :position="position">
    <span style="padding-left: 12px;">我的 position 属性值为 {{ position }}</span>
  </mg-drawer>

</template>
<script>
  export default {
    data(){
      return{
        show: false,
        position: 'left',
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

嵌套使用

个人觉得嵌套的场景，不同的宽度体验会更好一些
哦对了，内置了一个标题的样式，可以使用 title 属性或使用插槽自定义

展开查看

<template>
  <mg-drawer v-model="outerShow" :title="'我是外层的标题'" :position="'right'">
    <span>我是外层的内容</span>
    <mg-button @click="innerShow = true" :size="'mini'">打开内层</mg-button>
  </mg-drawer>

  <mg-drawer v-model="innerShow" :position="'right'" :modal-closable="false">
    <template v-slot:title>
      <h1 style="color: #0080FF;">我是内层的标题</h1>
    </template>
    <span>我会忽略蒙层点击</span>
    <mg-button @click="innerShow = false">点我关闭</mg-button>
  </mg-drawer>
</template>
<script>
  export default {
    data(){
      return{
        outerShow:false,
        innerShow:false
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意

嵌套使用Drawer时，不能在 <mg-drawer></mg-drawer> 中嵌套 <mg-drawer></mg-drawer>这将导致层级错误

现阶段，仍需要将两个 <mg-drawer/> 放在同一级别

PS: 后续此组件将支持 appendToBody 属性，能够支持代码层面的嵌套使用...不过我并不能给出准确时间 sorry 👨‍🏭
没错，上边这句是从Modal复制过来的👨‍🏭

其他可能用的到的小功能

escClosable 属性可以使用 Esc 按键关闭 Drawer
mask 属性可以控制遮罩层展示与否
...好尴尬，好像就这俩，还是请看下边列表吧 🤦‍♂️

Drawer Attributes

参数	说明	类型	可选值	默认值
v-model	显示与否	boolean	-	false
position	抽屉位置	string	top, right, bottom, left	left
modalClosable	是否可以点击背景关闭	boolean	-	true
width	宽度	string	-	40%
height	高度	string	-	25%
title	标题	string	-	-
drawerStyleObj	对drawer额外赋予的style	string	-	-
mask	是否展示遮罩层	boolean	-	true
escClosable	是否支持键盘 esc 关闭	boolean	-	false

Drawer Event

事件	说明	回参
open	抽屉打开时触发	-
opened	抽屉打开后（动画完成）执行	-
close	抽屉关闭时触发	-
closed	抽屉关闭后（动画完成）执行	-

Drawer Slots

名称	说明	-
title	标题	-

# Drawer 抽屉 pass 0.0.13+

# 基础用法

# 嵌套使用

# 其他可能用的到的小功能

# Drawer Attributes

# Drawer Event