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">);

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

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

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

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

标签:
vue.js,弹出框,vue,弹出框

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“vue多种弹框的弹出形式的示例代码”

暂无“vue多种弹框的弹出形式的示例代码”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?