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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
Node.js文件操作详解
Aug 16 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
JavaScript运动原理基础知识详解
Apr 02 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 print类函数使用总结
2010/06/25 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
详解python 中in 的 用法
2019/12/12 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
const和static readonly区别
2013/05/20 面试题
会计专业应届生求职信
2013/11/24 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
教师个人教学反思
2016/02/23 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL