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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
UI Events 用户界面事件
Jun 27 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
js制作支付倒计时页面
Oct 21 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 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
基于文本的搜索
2006/10/09 PHP
js 提交和设置表单的值
2008/12/19 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
详解angular element()方法使用
2017/04/08 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python实现Event回调机制的方法
2019/02/13 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
三好学生自我鉴定
2013/12/17 职场文书
法人身份证明书
2014/10/08 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
学校推普周活动总结
2015/05/07 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
高中美术教学反思
2016/02/17 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js