在一个页面的子组件中引用vux的popup组件时,出现mask遮罩在最上层的问题,百度了一下发现有两种解决办法,现提供第三种。

popup在子组件引用时,vux将vux-popup-mask默认添加到body末尾,如果引用popup的子组件的根节点未添加z-index属性,子元素无论层级多高都会被遮罩,mask会在最上层。

所以解决办法就是给子组件的根节点添加大于500的z-index。

百度的两种解决办法:

1,修改源码:

将popup.js中的

document.body.appendChild(this.divMask)
改为
document.querySelector('.vux-popup-dialog').after(this.divMask)
经过试验后该方法生效,但是关闭popup时,遮罩仍在最上层,导致页面无法点击
2,

找到该Popup组件的祖先DOM节点是否被设置该CSS属性:-webkit-overflow-scrolling: touch;
若被设置将该CSS属性,则去掉即可。

该方法未试验,祖先dom未被添加该属性

vue----子组件引用vux popup mask遮罩在最上层解决办法 z-index问题的更多相关文章

  1. vue 子组件引用

    使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...

  2. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  3. vue.js 组件引用之初级 之二

    1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...

  4. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  5. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  6. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. vue子组件通知父组件使用方法

    vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...

  8. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  9. vux 中popup 组件 Mask 遮罩在最上层问题的解决

    1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...

随机推荐

  1. Mycat分布式数据库架构解决方案--Mycat实现数据库分表

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 准备工 ...

  2. web基础运用

    目录 web框架 web应用本质 Web应用程序的优点 Web应用程序的缺点 BS架构优点 web框架的分类 web框架包含了三部分 web框架分类 Http协议 路由系统 自定制的web框架案例 w ...

  3. Trie树的java实现

    leetcode 地址: https://leetcode.com/problems/implement-trie-prefix-tree/description/ 难度:中等 描述:略 解题思路: ...

  4. Java 流程控制 之 分支结构——条件判断语句

    一.判断语句 1.判断语句1-- 单 if 语句(单分支结构) 语法格式: if(条件表达式){ 语句体; }  执行流程: 首先判断条件表达式看其结果是 true 还是 false: 如果是 tru ...

  5. Qt使用QPainter绘制矢量图并保存为svg文件

    位图和矢量图: Bitmap: Usually a larger file size Cannot be enlarged into a higher resolution as the image ...

  6. idea/借阅系统的APP开发

    (一) 今天去还书时,偶尔想到的idea. 看着在自主借还书机器面前的长龙,我突然想到为什么不将这部机器的功能弄成APP? 通过用手机扫条形码借书不是很方便吗? 哦,不行.借书可以,怎么确保用户将书还 ...

  7. 安装socketio出现module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 错误

    安装socketio出现module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 错误 执行: pip install --u ...

  8. Bootstrap。

    bootstrap: 1.概念:前端开发框架. 2.快速入门:下载bootstrap.导入文件. 3.响应式布局: * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成1 ...

  9. 使用Kubeadm安装Kubernetes【单Master节点】

    参考:Kubernetes官方文档 Kubernetes安装方案选择    Centos 7 配置科学上网 安装Calico网络插件 kubernetes-dashboard部署 Kubernetes ...

  10. SaltStack--使用salt-ssh

    SaltStack使用salt-ssh模式 salt-ssh 介绍 参考官档 salt-ssh是 0.17.0 新引入的一个功能,不需要minion对客户端进行管理,也可以不需要master:salt ...