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


Posted in Javascript onSeptember 18, 2017

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多种弹框的弹出形式的示例代码

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

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
js实现分页功能
May 24 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 #Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 #Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
详解node服务器中打开html文件的两种方法
Sep 18 #Javascript
详解利用 Express 托管静态文件的方法
Sep 18 #Javascript
Express使用html模板的详细代码
Sep 18 #Javascript
Mongoose中document与object的区别示例详解
Sep 18 #Javascript
You might like
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
php intval函数用法总结
2019/04/14 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
详解python eval函数的妙用
2017/11/16 Python
python逆向入门教程
2018/01/15 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
替换python字典中的key值方法
2018/07/06 Python
Python enumerate内置库用法解析
2020/02/24 Python
python文件读取失败怎么处理
2020/06/23 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
几个Linux面试题笔试题
2016/08/01 面试题
软件测试常见笔试题
2012/02/04 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
无故旷工检讨书
2014/01/26 职场文书
敬老院标语
2014/06/27 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js