vue----子组件引用vux popup mask遮罩在最上层解决办法 z-index问题
在一个页面的子组件中引用vux的popup组件时,出现mask遮罩在最上层的问题,百度了一下发现有两种解决办法,现提供第三种。
popup在子组件引用时,vux将vux-popup-mask默认添加到body末尾,如果引用popup的子组件的根节点未添加z-index属性,子元素无论层级多高都会被遮罩,mask会在最上层。
所以解决办法就是给子组件的根节点添加大于500的z-index。
百度的两种解决办法:
1,修改源码:

将popup.js中的
找到该Popup组件的祖先DOM节点是否被设置该CSS属性:-webkit-overflow-scrolling: touch;
若被设置将该CSS属性,则去掉即可。
该方法未试验,祖先dom未被添加该属性
vue----子组件引用vux popup mask遮罩在最上层解决办法 z-index问题的更多相关文章
- vue 子组件引用
使用 ref 为子组件指定一个引用 ID.例如: <div id="parent"> <user-profile ref="profile"& ...
- vue父组件引用子组件方法显示undefined问题原因及解决方法
关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...
- vue.js 组件引用之初级 之二
1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue子组件通知父组件使用方法
vue子组件通知父组件使用方法 <template> <mt-field placeholder="验证码" v-model="getverifycod ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vux 中popup 组件 Mask 遮罩在最上层问题的解决
1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...
随机推荐
- 48.vue-awesome-swipe使用
1.安装:npm install vue-awesome-swiper --save 2.局部引入: import "swiper/dist/css/swiper.css"; im ...
- 前端项目中公共方法汇总utils.js
目录 判断手机类型IOS Android 格式化金钱 金钱字符串变回数字 用aa替换中文 并返回 去除文件后缀,得到文件名称(不带后缀) 获取浏览器类型(名称) post方式下载文件流 动态设置img ...
- Android源码分析(三)-----系统框架设计思想
一 : 术在内而道在外 Android系统的精髓在源码之外,而不在源码之内,代码只是一种实现人类思想的工具,仅此而已...... 近来发现很多关于Android文章都是以源码的方向入手分析Androi ...
- TP5给request对象动态绑定属性
在tp5中可以给Request请求对象绑定属性,方便全局调用.比如我们可以在公共控制器中绑定当前登录的用户模型到请求对象. 1. 首先在公共控制器中绑定: <?php namespace app ...
- PB调用C#编写的Dll类库
在c# 中编写com组件,供PB调用实例 前言:c#中写的dll直接是不能被pb调用的,只有写成com组件才可以调用,所以用c#写dll时要注意. c#中新建类库 类库类型为通用类库,项目名为AddC ...
- layui扩展组件sliderVerify 实现滑块验证
首先在要使用的静态文件代码中引入‘./sliderVerify/sliderVerify.js‘ 先看看效果 示例代码 <!DOCTYPE html> <html> <h ...
- pt-online-schema-change 最佳实践(转)
pt的详细步骤 Step 1: Create the new table. Step 2: Alter the new, empty table. This should be very quick, ...
- List 分隔多次执行 且在同一个事物当中
@Override public boolean insrtListDatas(List<EtlCheckrecord> listmap, int fen) { if(fen<=0) ...
- 算法 翻转二叉树 dfs
翻转二叉树 翻转一棵二叉树.左右子树交换. Example 样例 1: 输入: {1,3,#} 输出: {1,#,3} 解释: 1 1 / => \ 3 3 样例 2: 输入: {1,2,3,# ...
- 【BZOJ 4004】 装备购买(高斯消元+贪心)
装备购买 题目 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量zi(aj ,.....,am) 表示 (1 <= i <= n; 1 <= j ...