在一个页面的子组件中引用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. MAC电脑下Appium + python3 + robotframework ios的真机测试环境搭建

    本人的环境搭建前的准备,MAC电脑一台(macOS Mojave 10.14.0及以上),Xcode 10.0及以上   ,自己注册的一个Apple ID 账户,必须你的电脑能连接互联网,最好不要用公 ...

  2. TCP协议的常见面试题

    1. 为什么连接的时候是三次握手,关闭的时候却是四次握手? 因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文.其中ACK报文是用来应答的,SYN报文是用来同 ...

  3. 【总结】web工作代码分类整理(持续更新)

    文件.blob 文件下载失败,将Blob对象转换为Json,处理异常错误? 使用FileReader,核心代码: var reader = new FileReader() reader.onload ...

  4. 从 Vue 的视角学 React(二)—— 基本语法

    基于 Vue.js 开发的时候,每个 vue 文件都是一个单独的组件,可以包含 HTML,JS,CSS 而 React 是以函数为基础,每个 function 就是一个组件.虽然 JSX 让 HTML ...

  5. Android实现二维码扫描功能

    1.效果预览 先上图展示效果(模拟器没有摄像头,录出来效果不好,将就看) 2.集成步骤 1.拷贝本项目demo中的com.google.zxing5个包引入到自己的项目中. 2.拷贝本项目demo中的 ...

  6. linux服务器问题排查:w命令卡住

    基本情况 系统: ubuntu16.04 症状: who命令可以用,w命令用不了 sudo iotop命令会卡住,黑屏 nvidia-smi命令和nvl命令都用不了,卡住 排查步骤 strace ps ...

  7. 你的Mac还安全吗

    MacOS 系统重大安全漏洞:不用密码我也可以玩你的 Macbook Wi-Fi 网络安全保护机制被攻破.Android 泄漏终端设备的用户声音和屏幕活动.iOS 出 bug,Office更是漏洞不断 ...

  8. dapi 基于Django的轻量级测试平台一 设计思想

    GitHub:https://github.com/yjlch1016/dapi 一.项目命名: dapi:即Django+API测试的缩写 二.设计思想: 模拟性能测试工具JMeter的思路, 实现 ...

  9. “为了交项目干杯”对“那周余嘉熊掌将得队”、“男上加男,强人所男”的Beta产品测试报告

    "为了交项目干杯"对"那周余嘉熊掌将得队"."男上加男,强人所男"的Beta产品测试报告 格式描述 课程名称:软件工程1916|W(福州大学 ...

  10. 什么是 MFA?

    Multi-Factor Authentication (MFA) 是一种简单有效的最佳安全实践方法,它能够在用户名和密码之外再额外增加一层安全保护. 启用 MFA 后,用户登录阿里云网站时,系统将要 ...