今天調試頁面效果的時候遇到這樣一個問題，就是項目中同時引用了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彈窗的上面了