脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js 弹出框

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

 更新时间：2017年09月18日 11:18:27   作者：小被子  
本篇文章主要介绍了vue多种弹框的弹出形式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

您可能感兴趣的文章:

相关文章

  • 解决vite.config.js无法使用__dirname的问题

    解决vite.config.js无法使用__dirname的问题

    这篇文章主要介绍了解决vite.config.js无法使用__dirname的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 使用vue引入maptalks地图及聚合效果的实现

    使用vue引入maptalks地图及聚合效果的实现

    这篇文章主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中el-date-picker限制选择7天内&禁止内框选择

    vue中el-date-picker限制选择7天内&禁止内框选择

    项目中需要选择时间范围,并且只能选择当前日期之后的七天,本文就来介绍了vue中el-date-picker限制选择7天内&禁止内框选择,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 详解VueJs中的V-bind指令

    详解VueJs中的V-bind指令

    v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.这篇文章主要介绍了VueJs中的V-bind指令,需要的朋友可以参考下
    2018-05-05
  • Vue中babel.config.js配置示例详解

    Vue中babel.config.js配置示例详解

    Babel是一个JS编译器,主要作用是将ECMAScript2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中,下面这篇文章主要给大家介绍了关于Vue中babel.config.js配置详解的相关资料,需要的朋友可以参考下
    2023-02-02
  • 详解VUE的状态控制与延时加载刷新

    详解VUE的状态控制与延时加载刷新

    本篇文章主要介绍了详解VUE的状态控制与延时刷新，实例分析了数据延时到展示的时候再去刷新的技巧，有兴趣的可以了解一下。
    2017-03-03
  • Vue resource三种请求格式和万能测试地址

    Vue resource三种请求格式和万能测试地址

    这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-09-09
  • Vue3.0实现无限级菜单

    Vue3.0实现无限级菜单

    这篇文章主要为大家详细介绍了基于Vue3.0实现无限级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 在Vue中使用HOC模式的实现

    在Vue中使用HOC模式的实现

    这篇文章主要介绍了在Vue中使用HOC模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    这篇文章主要介绍了浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论