vue多种弹框的弹出形式的示例代码

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弹框并列。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。