vue的弹窗（多级弹窗）研究心得

 在vue开发中弹窗用的次数比较多，例如添加修改页面常用，个人习惯把弹窗例如添加组件当成列表组件中的子组件进行引入，所以一定要把弹窗脚本写在子组件中，通过子组件的v-if语句进行控制，在弹窗的子组件关闭事件中写一个回调函数控制子组件是否加载达到弹窗的目的，注意弹窗的缺省按纽别用，一定要采用slot方式更灵活。二级弹窗时，不管你设置z-index等均无法控制二级弹窗在后面，一直隐藏在后面，后面发现可以在调用子组件引入时加一个div进行控制即可，见以下代码。

例如以下是真实项目中的代码摘取：

弹窗添加页面的子组件脚本：

<template>
  <div>
    <!--导入Excel -->
    <Modal
      v-model="modal1"
      ref="modal"
      :width="900"
      title="导入银行授信申请资料"
      :mask-closable="false"
      :mask="true"
      @on-ok="ok"
      @on-cancel="cancel"
      @on-visible-change="handVisibleChange">

       <div>

                             具体页面内容。

             <div>

<!-- 自定义弹窗的footer slot ,缺省的footer非常麻烦要控制loading-->

  <div slot="footer">
    <Button type="default" size="large" @click="handleCancle">关闭</Button>
    <!--第一步 -->
    <Button type="primary" size="large" :loading="loading" style="margin-left: 8px"
            @click="handleStep1('formUpload')" v-show="btnStep1">导入并下一步
    </Button>
    <!--第二步 -->
    <Button type="primary" size="large" :loading="loading" style="margin-left: 8px"
            @click="handleStep2('formCreditApply')" v-show="btnStep2">保存并下一步
    </Button>
    <!--第三步 -->
    <!--
    <Button type="primary" size="large" :loading="loading" style="margin-left: 8px"
            @click="handleStep3('formCustom')" v-show="btnStep3">确认材料导入
    </Button>
    -->
  </div>
</Modal>

methods: {

  // 弹窗上的按纽
  // 此事件其实没有意义，采用了自定义footer后永远不会触发了，
  ok () {
    this.$Message.info('Clicked ok')
  },
  // 目前仅用于右上角关闭时触发
  cancel () {
    this.$emit('handleCreditApplyImportShow')
    this.$Message.info('关闭弹出窗口')
  },

  handleCancle: function () {
    // 这句才是真正关闭
    this.$refs.modal.close()
  }

。。。。。

父组件中调用方式（注意为了解决多级弹窗一定要在子组件前面加上一个div，估计是v-if没有div无法二次加载，第一次有效再打开无效，如果只有一级弹窗不需要div,这是在真实项目中摸索出来的，大家可以省走弯路），这边用了一技巧把div和子组件的v-if控制设置了同一个值，以便达到弹窗的目的：

<!-- pdf查看子组件-->
<div v-if="pdfViewShow"><pdfView  v-if="pdfViewShow" :common-file="commonFile" @handlePdfViewShow="handlePdfViewShow"/></div>