vue多种弹框的弹出形式

最新推荐文章于 2025-05-26 09:25:49 发布

转载最新推荐文章于 2025-05-26 09:25:49 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011199737

文章标签：

#javascript #php #前端 #ViewUI

本文探讨了Vue项目中使用Element-UI的el-dialog组件时遇到的加载与显示问题，包括如何正确地组织多个嵌套弹框组件以避免遮罩层覆盖导致的用户体验不佳，以及不同显示条件下的组件加载机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo地址：
1、父组件引入子组件，子组件的加载问题
products.vue引入dlAddProd弹框（dlAddProd.vue），由于<div v-show="visible">，所以在products页面加载时，dlAddProd会被加载。但是el-dialog中的body部分不会被加载（不管有没有加v-if指令）；dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框，但此时只有dlBlankAdd会被加载，dlEditProd不会被加载（<div v-if="visible">）；
图片描述

2、注意的地方
由于element-UI的弹框组件el-dialog在其body部分再加一个弹框B会导致在弹出弹框B的时候，B和父弹框同时被遮罩层遮住的问题(https://jsfiddle.net/Irene_Ta...，所以当需要实现在一个弹框A弹出弹框B的功能，最好是将这两个弹框并列写在一个文件中，如下：

<template>
  <div v-show="visibleA"> 或者v-if="visibleA" 或者不写
    <el-dialog v-model="visibleA" ref="dialogA"><el-dialog>
    <el-dialog v-model="visibleB" ref="dialogB"><el-dialog>
  </div>
</template>

当然，也可以将弹框B写成一个组件dialogB，然后引入，如下

<template>
  <div v-show="visibleA"> 或者v-if="visibleA" 或者不写
    <el-dialog v-model="visibleA" ref="dialogA"><el-dialog>
    <el-dialog v-model="visibleB" ref="dialogB"><el-dialog>
  </div>
</template>
<script>
  import dialogB from './dialogB.vue'
  export default {
    components: {
      dialogB
    }
  }
</script>

3、demo中出现的弹框形式
类型一：A弹框中弹出B弹框的类型
类型二：弹框body变换的类型（点击A弹框的按钮之后，body由C变成D，但还是同一个弹框，并且此时弹框出现返回键，点击返回键，body又回到C，点击关闭键，弹框消失），不管是通过body C点击出来的弹框还是body D点击出来的弹框都应该和A弹框并列。
图片描述