vue2项目同时引用了element ui的Dialog组件和iview ui的Model组件，Dialog遮挡Model内容

今天调试页面效果的时候遇到这样一个问题，就是项目中同时引用了element ui的Dialog弹窗组件和iview ui的Model弹窗组件，点击Dialog弹窗中的某个输入框需要弹出使用Model组件制作的地图弹窗，发现如图Model弹窗被Dialog弹窗遮挡，后面是在element ui的Dialog弹窗组件上加了句z-index:999解决了该问题，弹窗层级默认是自增的，但是使用不同组件的弹窗层级可能有所偏差。

element ui的Dialog弹窗组件和iview ui的Model弹窗同时引用页面：

<template>
  <div class="popup-container">
    <popup :title="dialogTitle" width="30%" :value="visible" @beforeClose="cancel" :isTemplate ="false">
      <div class="form-container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in menuData" :key="index"></el-tab-pane>
        </el-tabs>
        <div class="form-body">
          <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <div class="form-item-container">
              <el-form-item label="事故名称：" prop="sgmc" required>
                <el-input v-model="form.sgmc" placeholder="请输入事故名称" readonly></el-input>
              </el-form-item>
              <el-form-item label="事故类型：" prop="sglx" required>
                <el-select v-model="form.sglx" placeholder="请选择事故类型">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in sglxOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="事故级别：" prop="sgjb" required>
                <el-select v-model="form.sgjb" placeholder="请选择事故级别">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in sgjbOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="事故来源：" prop="sgly" required>
                <el-select v-model="form.sgly" placeholder="请选择事故来源">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in sglyOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="响应等级：" prop="xydj">
                <el-select v-model="form.xydj" placeholder="请选择响应等级">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in xydjOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="报警对象：" prop="bjdx">
                <el-select v-model="form.bjdx" placeholder="请选择报警对象">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in bjdxOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="执行预案：" prop="zxya">
                <el-select v-model="form.zxya" placeholder="请选择执行预案">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in zxyaOptions" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="经纬度：" prop="jwd" required>
                <el-input v-model="form.jwd" placeholder="请输入经纬度" @focus="openDialog"></el-input>
              </el-form-item>
              <el-form-item label="事发时间：" prop="sfsj" required>
                <el-date-picker
                  v-model="form.sfsj"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择事发时间"
                  style="width: 100%;">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="事发位置：" prop="sfwz" required>
                <el-input v-model="form.sfwz" placeholder="请输入事发位置"></el-input>
              </el-form-item>
              <el-form-item label="事件描述：" prop="sjms">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="form.sjms"
                  placeholder="请输入事件描述">
                </el-input>
              </el-form-item>
            </div>
            <el-form-item class="flex-row">
              <div class="btn-container">
                <span class="submit-btn" @click="resetForm('form')">取消</span>
                <span class="submit-btn qd-btn" @click="submitForm('form')">确定</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </popup>
    
      
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        width="660"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
  </div>
</template>

封装的element ui的Dialog弹窗组件：

<template>
  <el-dialog
      custom-class="popup-container"
      top="5vh"
      :width="width"
      :visible="value"
      :append-to-body="true"
      :modal-append-to-body="false"
      :show-close="false"
      @beforeClose="beforeClose"
      :destroy-on-close="true"
      z-index="999"
  >
    <template slot="title">
      <div class="title">
        <span>{{ title }}</span>
      </div>
    </template>
    <img src="~@/assets/images/zhyq/shebei/close.png" class="popup-close" @click="beforeClose">
    <template v-if="isTemplate">
      <slot />
      <div>
        <pagination
          layout="total, prev, pager, next"
          :total="params.total"
          :page="params.page"
          :limit="params.limit"
          @pagination="paginationChange"
        />
      </div>
    </template>
    <template v-else>
      <slot />
    </template>
  </el-dialog>
</template>

解决方法如下：

在element ui的Dialog弹窗组件添加如下3句话

1. :append-to-body="true"
2. :modal-append-to-body="false"
3. z-index="999"

页面正常了，iview ui的Model弹窗就显示在Dialog弹窗的上面了