# 模态框

# 介绍

本 modal 摸态框，和el-dialog差不多

# 示例

hello modal

hello modal，I am children.

<template>
  <div>
    <div>
      <el-button type="primary" @click="open">打开</el-button>
    </div>
    <lx-modal
        :zIndex="100"
        :before-close="closeModal"
        :append-to-body="true"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        :destroy-on-close="true"
        title="标题1"
        :visible.sync="show"
    >
      <div>
        hello modal
        <el-button @click="openModal2">打开子modal</el-button>
      </div>
      <lx-modal
          :zIndex="101"
          :append-to-body="true"
          :before-close="closeModal2"
          :close-on-click-modal="true"
          :close-on-press-escape="true"
          :destroy-on-close="true"
          title="子Modal标题"
          :visible.sync="show2"
      >
        <div>
          hello modal，I am children.
        </div>
        <template #footer>
          <el-button @click="show2 = false">提交</el-button>
        </template>
      </lx-modal>
      <template #footer>
        <el-button @click="show = false">提交</el-button>
      </template>
    </lx-modal>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      show2: false
    }
  },
  methods: {
    openModal2 () {
      this.show2 = true
    },
    closeModal2 (done) {
      done()
    },
    open () {
      this.show = true
    },
    closeModal (done) {
      // this.show = false
      done()
    },
  }
}
</script>

Copy

参数	说明	数值类型	可选值	默认值	其他
visible	是否显示modal，添加语法糖 visible.async的时候是双向绑定的	Boolean	false	-
title	标题	string	-	-
width	modal宽度	string	-	50%
top	modal距离顶部	string	-	15vh
zIndex	图层位	number	-	1
destroyOnClose	关闭modal时是否销毁内容	Boolean	true / false	false
showClose	是否显示右上角关闭按钮	Boolean	true / false	true
closeOnClickModal	是否点击蒙层关闭	Boolean	true / false	true
closeOnPressEscape	是否可以通过键盘的Esc关闭	Boolean	true / false	true
appendToBody	模态框是否挂在到body上，嵌套的modal需要加上此属性	Boolean	true / false	true
beforeClose	关闭modal前的回调，传入一个函数，可以接收一个done函数，此函数传入一个false可以阻止modal关闭	Function			function (done)
appendToBody	模态框是否挂在到body上，嵌套的modal需要加上此属性	Boolean	true / false	true

# slot

slotName	说明
-	Modal 的内容	---
title	Modal 标题区的内容	---
footer	底部的内容	---

← 上传图片列表

# 模态框

# 介绍

# 示例

# Menu Attributes

# slot