在一个页面的子组件中引用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. 2019 阿里java面试笔试总结 (含面试题解析)

       本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.滴滴等公司offer,岗位是Java后端开发,因为发展原因最终选择去了阿里,入职一年时间了,也成为了面试官, ...

  2. Java 之 LinkedHashSet 集合

    一.概述 java.util.LinkedHahset 集合 extends HashSet 集合 在HashSet下面有一个子类java.util.LinkedHashSet,它的底层是一个哈希表( ...

  3. Unity手游汉化笔记③:UABE替换BMFont

    总的笔记:https://www.cnblogs.com/guobaoxu/p/12055930.html 目录 一.Demo 二.分析思路 三.替换 四.总结 五.补充 工具: Unity版本:20 ...

  4. org.apache.catalina.core.StandardService - Stopping service [Tomcat]

    今天在启动springboot项目突然启动失败,但是在测试日志文件,以为是日志出错,下面这个是logback打印的异常信息. 2019-05-30 15:09:10.686 [restartedMai ...

  5. prometheus学习系列一: Prometheus简介

    Prometheus简介 prometheus受启发于Google的Brogmon监控系统(相似kubernetes是从Brog系统演变而来), 从2012年开始由google工程师Soundclou ...

  6. awk - 数据分析和展示

    目录 NAME 格式 常用选项 表达式 PATTERN(模式) 流程控制语句 数组 print,printf格式化输出 常用示例 NAME gawk - pattern scanning and pr ...

  7. sparkstreaming写入hbase表中总结

    执行spark代码插入数据到hbase表中去的时候,遇到的错误 1. 缺少hadoop-mapreduce-client-core-2.5.1.jar包 错误:java.lang.ClassNotFo ...

  8. dfs 之 下一个排列

    52. 下一个排列 中文English 给定一个整数数组来表示排列,找出其之后的一个排列. Example 例1: 输入:[1] 输出:[1] 例2: 输入:[1,3,2,3] 输出:[1,3,3,2 ...

  9. 【转载】python2x与3x下urlretrieve的使用

    转载地址:https://blog.csdn.net/drdairen/article/details/61934598 1.python2x下urlretrieve方法: 直接将远程数据下载到本地. ...

  10. 拖拽插件SortableJS

    在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次 ...