vue 弹框产生的滚动穿透问题的解决

2024-12-22 15:36:15

最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。

首先定义一个全局样式：

.noscroll{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

创建一个dom.js文件，定义几个方法：

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  if(el.className === ''){
    el.className += className
  }else{
    let newClass = el.className.split(' ')
    newClass.push(className)
    el.className = newClass.join(' ')
  }

}

export function removeClass(el,className) {
  if (hasClass(el, className)) {
    el.className = el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
  };
}

获取<html>标签的DOM：

this.htmlDom = document.getElementsByTagName('html')[0];

在弹框弹出来的时候：

addClass(this.htmlDom, 'noscroll');

弹框关闭的时候

removeClass(this.htmlDom, 'noscroll');

这样就可以解决滚动穿透的问题了~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue中的scoped实现原理及穿透方法

何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp
vue解决弹出蒙层滑动穿透问题的方法

最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码上
详解Vue中的scoped及穿透方法

scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这
详解Vue中CSS样式穿透问题

1. 问题由来在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有
关于vue组件事件属性穿透详解

组件事件属性穿透属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 // 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> &l
对vue中的事件穿透与禁止穿透实例详解

在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //
vue 弹框产生的滚动穿透问题的解决

最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧. 首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + classN
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新: 2.解决办法: 数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),后来发现热更新之后视图更新了,所以跟周期函数没有关系:参考了一下网上的一些资料,发现可以用vue中的watch()函数来监听数据的更新,一旦数据更新了,那么就在watch()函数中调用drawLine()函数,发现视图更新了,完美解决. 补充知识:vue echarts line动态刷新数据
vue中pc移动滚动穿透问题及解决

目录 vue pc移动滚动穿透问题上层无滚动(很简单直接@touchmove.prevent) 上层有滚动滑动穿透终极解决方案问题描述问题探究原理探究 vue pc移动滚动穿透问题上层无滚动(很简单直接@touchmove.prevent) <div @touchmove.prevent> 我是里面的内容 </div> 上层有滚动如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 t
vue 解决mintui弹窗弹起来,底部页面滚动bug问题

经过dom层层注释缩小反馈终于找到问题所在. 问题经过我在弹起弹窗的时候,设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结说实话,使用Mint-ui这个ui组件的过程中遇到了
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)

1. 实现效果 2.实现原理在父组件中点击编辑按钮,将当前点击对象的id传给子组件,子组件根据id修改相应的内容父组件中代码: //放置编辑按钮的位置 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" v-on:click="edit(manage.id)"><i class="layui-icon"><
vue多种弹框的弹出形式的示例代码

1.父组件引入子组件,子组件的加载问题 products.vue引入dlAddProd弹框(dlAddProd.vue),由于<div v-show="visible">,所以在products页面加载时,dlAddProd会被加载.但是el-dialog中的body部分不会被加载(不管有没有加v-if指令):dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框,但此时只有dlBlankAdd会被加载,dlEditProd不会被加载(<d
vue教程之toast弹框全局调用示例详解

本文实例为大家分享了vue toast弹框全局调用示例,供大家参考,具体内容如下 1.首选新建一个toast.vue模板文件: <template> <transition :name="fadeIn"> <div class="alertBox" v-show="show"> <div class="alert-mask" v-show="isShowMask"&
vue+iview写个弹框的示例代码

iView 是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品. 1.iView的特性 1) 高质量.功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致.漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题 2.iView的安装: 1) 使用npm: npm install --save iview 2) CDN引入: <link rel="stylesheet" href="css/iview.css" rel="
vue.js实现只弹一次弹框

核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. <template> <div v-if="isShow">  <div class="popup_container">  <img @click="noPopup" src="delete.png" alt="&q
vue中简单弹框dialog的实现方法

效果如下,dialog中内容自行添加 <template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class=

vue 弹框产生的滚动穿透问题的解决

相关推荐

随机推荐