vue多种弹框的弹出形式的示例代码_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 03:17:49 点击率：次

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

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

# vue.js # 弹出框 # vue # 利用Vue3封装一个弹框组件简单吗 # 基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析 # vue移动端弹框组件的实例 # vue教程之toast弹框全局调用示例详解 # vue+elementui实现点击table中的单元格触发事件--弹框 # vue.js中toast用法及使用toast弹框的实例代码 # vue+iview写个弹框的示例代码 # vue中简单弹框dialog的实现方法 # vue自定义全局组件实现弹框案例 # 加载 # 弹出 # 框中 # 不写 # 这两个 # 写在 # 再加 # 大家多多 # 在弹出 # 引入了 # br # text # products # style # UI # strong # body # align # center

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：PDF怎么插入附件 PDF附件嵌入操作方法

下一篇：京东快递查询入口直接打开手机京东快递查询入口打开直接能查

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：PDF怎么插入附件 PDF附件嵌入操作方法

下一篇：京东快递查询入口直接打开手机京东快递查询入口打开直接能查