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 Tabs插件宿主IFRAMES
Jan 01 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
js中键盘事件实例简析
Jan 10 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
JavaScript canvas实现文字时钟
Jan 10 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
tensorflow自定义激活函数实例
2020/02/04 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
自考生自我鉴定范文
2013/10/01 职场文书
管理科学大学生求职信
2013/11/13 职场文书
年度考核自我鉴定
2014/02/02 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
工厂标语大全
2014/10/06 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
教师师德表现自我评价
2015/03/05 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS