Mango UI

Modal 对话框 pass 0.0.13+

基础用法

默认宽度为 40%，高度由内容撑开

展开查看
<template>
  <mg-button @click="modal1 = true">打开对话框</mg-button>
  <mg-button @click="modal2 = true">忽略背景点击</mg-button>

  <mg-modal v-model="modal1" height="300px">
    <div class="align">
      点击背景可以关闭 Modal
    </div>
  </mg-modal>

  <mg-modal :modal-closable="false" v-model="modal2" height="300px">
    <div class="align">
      <mg-button @click="modal2 = false">close</mg-button>
    </div>
  </mg-modal>
</template>
<script>
  export default {
    data(){
      return{
        modal1: false,
        modal2: 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
25
26

提示

暂时未支持具名插槽，所以目前Modal内部元素的样式需自行实现
之后会支持常用的 Modal 基础布局

嵌套使用

展开查看
<template>
  <mg-button @click="modal3 = true">第一层Modal</mg-button>

  <mg-modal v-model="modal3" height="300px">
    <div class="align">
      <mg-button @click="modal4 = true">打开第二层</mg-button>
    </div>
  </mg-modal>

  <mg-modal v-model="modal4" height="300px" :width="'20%'">
    <div class="someClassName">
      这是第二层 Modal
    </div>
  </mg-modal>
</template>
<script>
  export default {
    data(){
      return{
        modal3: false,
        modal4: 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
25

注意

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

现阶段，仍需要将两个 <MgModal> 放在同一级别

PS: 后续此组件将支持 appendToBody 属性，能够支持代码层面的嵌套使用...不过我并不能给出准确时间 sorry 👨‍🏭

参数说明类型可选值默认值
v-model显示与否boolean-false
modalClosable是否可以点击背景关闭boolean-true
width宽度string-40%
height高度string--
事件说明回参
open对话框打开时触发-
opened对话框打开后（动画完成）执行-
close对话框关闭时触发-
closed对话框关闭后（动画完成）执行-