当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue多种弹框的弹出形式的示例代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

2016民主生活会对照检查材料,铁将军导航仪,半成年

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">）；

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弹框并列。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网