在一个页面的子组件中引用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. python基础05day--函数

    一 函数知识体系 什么是函数?为什么要用函数?函数的分类:内置函数与自定义函数如何自定义函数 语法 定义有参数函数,及有参函数的应用场景 定义无参数函数,及无参函数的应用场景 定义空函数,及空函数的应 ...

  2. ES6 之 Symbol

    1. 基本用法 Symbol 是ES6引入的一种新的原始数据类型,表示独一无二的值. 前六种基础数据类型是 undefined null Boolean String Number Object Sy ...

  3. Django2.2 pymysql 连接mysql数据库的坑

    参考链接 https://www.52pojie.cn/thread-921141-1-1.html 1. mysqlclient 1.3版本不对 解决办法:注释掉D:\Users\xxx\AppDa ...

  4. MySQL Table--MySQL外键

    在之前的MySQL运维中,要求禁用触发器/存储过程/外键等一些数据库常见功能,因此对MySQL外键也相对比较陌生,今天特地探究下. 现有表TB001和TB002各包含6291456行数据,创建脚本如下 ...

  5. Win10 系统删除文件时提示文件不存在

    Win10系统使用一段时间后用户都会定期进行删除清理系统垃圾,减少系统盘的容量占用,但在删除的过程中许多用户都遇到无法删除的情况,这一次系统提示"文件不存在",这该怎么解决?我们可 ...

  6. RabbitMQ的使用Demo

    rabbitmq消息队列,官网有六种,实战常用的也就如下五种. 下面开始demo讲解 大致三步:1.配置消息队列,2.生产者提供消息给队列,3.消费者监听消费队列消息 源码下载:https://pan ...

  7. Odoo中的ORM API(模型数据增删改查)

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826214.html 一:增 1:create():返回新创建的记录对象 self.create({'na ...

  8. python url合并与分离

     #!/bin/python3 from urllib import parse parse.urlsplit() 将url分为6个部分,返回一个包含6个字符串项目的元组:协议.位置.路径.参数.查询 ...

  9. webpack4.0报WARNING in configuration警告

    在进行webpack打包工作时,先进行如下步骤 1). 安装webpack:推荐全局命令  cnpm install webpack -g 查看webpack版本 webpack -v 2) . 此时 ...

  10. Linux GCC下strstr的实现以及一个简单的Kmp算法的接口

    今天做了一道题,要用判断一个字符串是否是另一个字符串的子串,于是查了一下strstr的实现. 代码如下: char *strstr(const char*s1,const char*s2) { con ...