element 的dialog嵌套问题,第二个弹窗会被遮住的解决办法

背景

el-dialog中再嵌套一个el-dialog,第二个弹窗会被遮住。这是因为第二个弹窗没有给定append-to-body属性造成的

正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
我们更推荐el-dialog+ElMessageBox的形式,这样就不会造成弹窗被遮住的问题了

如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。

<template>
  <el-dialog width="200px" top="50px" :close-on-click-modal="false" :title="$t('selectToExport')" custom-class="dialog" :before-close="handleClose">
    <div style="padding: 20px 20px 20px 11px">
      <div class="template-select">
        <el-select v-model="templateId"  :placeholder="$t('pleaseChooseTemplate')" size="mini" class="template-select-real" filterable clearable v-if="showTemplate" @change="changeTemplateSelect">
          <el-option
            v-for="(item) in templateOptions"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          > 
            <div class="template-select-real-item">
              <span>{{ item.templateName }}</span>
              <i class="iconfont icon-shanchu del-icon" @click.stop="showDelTemplatePopup(item.id)"></i>
            </div>
          </el-option>
        </el-select>
      </div>
    <!-- 新增模板弹窗 -->
    <template>
      <el-dialog v-model="isShowAddTemplatePopup" width="20%" top="251px" :close-on-click-modal="false" :before-close="closeAddTemplatePopup" append-to-body :title="$t('addTemplate')">
        <div class="template-popup">
          <!-- <div class="template-popup-title">{{$t("addTemplate")}}</div> -->
          <div class="template-popup-content">
            <el-input v-model="templateName" :placeholder="$t('templateName')" maxlength="30" />
          </div>
          <div class="template-popup-btn">
            <el-button size="mini" @click="closeAddTemplatePopup">{{ $t("cancel") }}</el-button>
            <el-button size="mini" type="primary" @click="handleAddTemplatePopup" :loading="addTemplateLoading">{{ $t("ensure") }}</el-button>
          </div>
        </div>
      </el-dialog>
    </template>
  </el-dialog>
</template>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐