在一个页面的子组件中引用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. Java自学-面向对象 属性

    Java类的属性 一个英雄有姓名,血量,护甲等等状态 这些状态就叫做一个类的属性 步骤 1 : 属性的类型 属性的类型可以是基本类型,比如int整数,float 浮点数 也可以是类类型,比如Strin ...

  2. 全程实操cdh5.14.4中集成安装kylin2.4.1与使用测试

    在cdh5.14.4安装完成并排错完成的情况下,进行如下kylin安装操作: 1.实验环境 三台CentOS 7主机,IP地址 192.168.43.129 cm1 192.168.43.130 cm ...

  3. 【转载】C#通过Contains方法判断DataTable中是否存在某个列名

    在C#中的Datatable数据变量的操作过程中,有时候需要判断DataTable中是否存在某个列名,此时可以通过DataTable对象的Columns列对象集合属性下的Contains方法来进行判断 ...

  4. HTML不换行,多余用省略号代替

    最主要的css样式: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 例子: <!DOCTYPE html> ...

  5. Java Web项目搭建过程记录(struts2)

    开发工具:eclipse 搭建环境:jdk1.7   tomcat 8.0 基础的java开发环境搭建过程不再赘述,下面从打开eclipse 之后的操作开始 第一步: 创建项目,File -> ...

  6. webdriver 属于selenium 体系中设计出来操作浏览器的一套API

    1.元素的定位   1.id属性定位 实例:   find_element_by_id("kw")  2.name属性定位,同id一样是属性值 实例:  find_element_ ...

  7. Springboot+Mybatis的逆向工程

    Mybatis逆向工程,自动生成 entity类和常用的增删改查方法. 1.pom.xml引入类 <!-- 通用mapper 用于mabatis封装的基础增删改查的功能--><dep ...

  8. prometheus学习系列十一: Prometheus pushgateway的使用

    由于网络问题或者安全问题,可能我们的数据无法直接暴露出一个entrypoint 给prometheus采集. 这个时候可能就需要一个pushgateway来作为中间者完成中转工作.  promethe ...

  9. Linux Mysql创建新用户并允许远程连接

    第一步 登陆mysql: mysql-u 数据库用户名 -h 数据库IP -p 根据提示 输入数据库密码 第二步: GRANT ALL PRIVILEGES ON *.* TO '自定义用户名'@'% ...

  10. 【异常】Caused by: java.sql.SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 30005ms.

    一.异常出现的场景 一次线上订单历史数据字段刷新操作,3张表100多万数据.由于同步更新太慢大概20分钟以上,所以采用异不的方式.代码如下: private void batchUpdate(List ...