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

本篇文章主要介绍了vue多种弹框的弹出形式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、父组件引入子组件,子组件的加载问题

,所以在products页面加载时,dlAddProd会被加载。但是el-dialog中的body部分不会被加载(不管有没有加v-if指令);dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框,但此时只有dlBlankAdd会被加载,dlEditProd不会被加载(
);

2、注意的地方

由于element-UI的弹框组件el-dialog在其body部分再加一个弹框B会导致在弹出弹框B的时候,B和父弹框同时被遮罩层遮住的问题(https://jsfiddle.net/Irene_Ta...,所以当需要实现在一个弹框A弹出弹框B的功能,最好是将这两个弹框并列写在一个文件中,如下:

 

当然,也可以将弹框B写成一个组件dialogB,然后引入,如下

 

3、demo中出现的弹框形式

类型一:A弹框中弹出B弹框的类型

类型二:弹框body变换的类型 (点击A弹框的按钮之后,body由C变成D,但还是同一个弹框,并且此时弹框出现返回键,点击返回键,body又回到C,点击关闭键,弹框消失),不管是通过body C点击出来的弹框还是body D点击出来的弹框都应该和A弹框并列。


以上就是vue多种弹框的弹出形式的示例代码的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程