精华内容
下载资源
问答
  • vue 移动端弹窗后禁止页面滚动
    千次阅读
    2021-11-11 14:04:09

    vue 移动端弹窗后禁止页面滚动

    <div  @touchmove.prevent></div>
    

    可以在遮罩层中添加 @touchmove.prevent 就可以实现禁止页面滚动
    注意 弹窗里面有滚动条的也是无法滚动的

    更多相关内容
  • 需求:在某些时候弹出弹窗,但是不能又淹没层,点击弹窗外面之后能关闭弹窗

    需求:在某些时候弹出弹窗,但是不能又淹没层,点击弹窗外面之后能关闭弹窗。

     

    思路:用document 的 addEventListener来监听点击关闭事件。

    效果:

    代码:

    funcProjectFile(event) {
    	//阻止冒泡
    	event || (event = window.event);
    	event.stopPropagation ? event.stopPropagation(): (event.cancelBubble = true);
    	this.funcInitProjectPage();
    	this.showPdfBox = true;// 显示pdf的弹窗
    	PDFObject.embed("https://pdfobject.com/pdf/sample-3pp.pdf", "#pdfBox");
    	document.addEventListener("click", this.hideFilePanel, false);// 监听关闭事件
    },
    hideFilePanel(e) {
    	console.log("销毁关闭pdf的监听事件。");
    	document.removeEventListener("click", this.hideFilePanel, false);
    	this.showPdfBox = false;// 隐藏pdf的弹窗
    },

    【我这是vue写的】

    简单说就是用document.addEventListener("click", this.hideFilePanel, false);// 监听关闭事件hideFilePanel

    记得要销毁监听事件

    展开全文
  •   首先,我们使用正常的vue操作,比如刚才的修饰符/语法糖进行操作时,虽然可以屏蔽掉背景数据滑动,但是该事件同时会将弹框内的滑动也阻止掉,我们则无法完成该需求。如果这个不行,我们还有别的方法来完成需求吗...

    . 弹框内数据需要滑动展示

    => 思路

      首先,我们使用正常的vue操作,比如刚才的修饰符/语法糖进行操作时,虽然可以屏蔽掉背景数据滑动,但是该事件同时会将弹框内的滑动也阻止掉,我们则无法完成该需求。如果这个不行,我们还有别的方法来完成需求吗?
      我考虑到一种方案,但是属于DOM操作,与vue的初衷可能不太符合。不过此方案也不矢为一种能够有效解决问题的办法。

    思路:
    利用cssposition: fixed以及top: x px来固定位置。步骤分解如下:

    1. 写一个样式放到公共css中备用;
    2. 点击按钮,控制弹窗显示隐藏;
    3. 两个方法,一个控制将步骤1写的css动态添加到body上,另外一个则控制移除该效果;
      • 添加方法:①获取当前页面距离顶部高度,保存到data中;②给body添加步骤1的css;③设置body的高度为刚才获取到的高度。
      • 移除方法: ①将刚才冬天给body添加的css移除;②当前滑动高度设置为data中存储的高度。
    <template>
        <div class="modalTest">
            <!-- 按钮组 -->
            <div class="btn">
                <el-button type="success" size="small" @click="modalSign1 = true">弹窗1</el-button>
                <br>
                <el-button type="danger" size="small" @click="openModal">弹窗2</el-button>
            </div>
    
            <!-- 背景数据 -->
            <div class="listBG">
                <ul>
                    <li v-for="item in 50">这是第{{item}}条背景数据</li>
                </ul>
            </div>
    
    
            <!-- 弹框1 -->
            <div class="modalBox" v-if="modalSign1" @touchmove.prevent @click.self="modalSign1 = false">
                <div class="modal">
                    <ul>
                        <li v-for="item in 8">这是第{{item}}条数据</li>
                    </ul>
                </div>
            </div>
            <!-- 弹框2 -->
            <div class="modalBox" v-if="modalSign2" @click.self="closeModal">
                <div class="modal">
                    <ul>
                        <li v-for="item in 20">这是第{{item}}条数据</li>
                    </ul>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    modalSign1: false, // 弹窗是否打开
                    modalSign2: false, // 弹窗是否打开
                    scrollTop: undefined, // 距离顶端的值
                    className: 'modalOpen', // 类名
                }
            },
            methods: {
                // 打开弹层 要做的事
                afterOpen () {
                    this.scrollTop = document.scrollingElement.scrollTop;
                    document.body.classList.add(this.className);
                    document.body.style.top = `-${this.scrollTop}px`;
                },
                // 弹层关闭之前 要做的事
                beforeClose () {
                    document.body.classList.remove(this.className);
                    document.scrollingElement.scrollTop = this.scrollTop;
                },
                // 打开弹窗
                openModal () {
                    this.modalSign2 = true;
                    this.afterOpen();
                },
                // 关闭弹窗
                closeModal () {
                    this.modalSign2 = false;
                    this.beforeClose();
                }
            },
            mounted() {
    
            }
        }
    </script>
    
    <style type="text/scss" lang="scss" scoped>
        .modalTest{
            width: 100%;
            min-height: 100vh;
            overflow: scroll;
            .btn{
                padding: 10px;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 10;
                &>button{
                    margin: 10px 0;
                }
            }
            .listBG{
                text-align: center;
                line-height: 50px;
            }
            .modalBox{
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                position: fixed;
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.4);
                z-index: 999;
    
                .modal{
                    width: 220px;
                    height: 280px;
                    overflow: scroll;
                    background: #fff;
                    border-radius: 10px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    -moz-box-shadow:10px 10px 9px #332A0D;
                    -webkit-box-shadow:10px 10px 9px #332A0D;
                    box-shadow:10px 10px 9px #332A0D;
                    padding: 30px 0 0;
    
                    ul{
                        text-align: center;
                        li{
                            list-style: none;
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    </style>

    => 备注

    .modalOpen的css样式,放在公共样式中,因为我们要改变的是body的样式,因此在组件中写的样式可能会失效。例如,我将样式放在了src/assets/css/common.css

    /*弹层*/
    body.modalOpen {
        -webkit-overflow-scrolling:touch;
        position: fixed;
        width: 100%;
    }
    

     

    展开全文
  • 添加一个临时空白页面,submit 提交 form var url = "跳转url路径"; let form = document.createElement('form'); window.open(url, '_blank'); document.body.appendChild(form); form.submit();

    添加一个临时空白页面,submit 提交 form

     var url = "跳转url路径";
     let form = document.createElement('form');
     window.open(url, '_blank');
     document.body.appendChild(form);
     form.submit();
    
    展开全文
  • vue实现弹窗拖拽

    2021-01-30 13:23:16
    export default { directives: {... element.onmousedown = function(e) { e.stopPropagation() } } } } } 使用方法: 在需拖拽功能的元素上添加v-drag启用: 启用.png 在不需拖拽的元素上添加v-stopdrag阻止阻止.png
  • vue 移动端弹窗后禁止页面滚动 @touchmove.prevent 可以在遮罩层中添加@touchmove.prevent 就可以实现禁止页面滚动 注意 弹窗里面有滚动条的也是无法滚动的 <div class="popup" @touchmove.prevent></...
  • vue 弹窗禁止底层滚动

    2021-01-13 07:11:57
    原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件。let mo=function(e){e....
  • 本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下 本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果。所以暂时算是半成品。 练习代码如下: <!DOCTYPE html> ...
  • 路由拦截.gif假设有这样的需求,点击这个“私密”,进不去这个组件页,Vue-router会进行拦截,然后弹窗提示信息。这种情况,方案有好几种:全局守卫、路由独享守卫、组件内守卫均可实现// router.jsconst routes = ...
  • vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ”dialog”> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还...
  • vue+element的弹窗,自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件,不允许拖到可视范围之外了。添加了弹窗如果有表格,对表格进行自适应的功能
  • 1.vue弹窗不超出屏幕:可以使用vue自带的@touchmove.prevent阻止滑动,但是这个方法会对其内的子元素的滑动事件也禁止掉,防止子元素的滑动事件被禁止掉,可以使用@touchmove.self.prevent。这样就只禁止自身的活动...
  • }, // 实现点击弹窗内容自身阻止冒泡,以防弹窗被关闭 stopClose(e: any) { e.stopPropagation(); } } }) </script> css样式 // 关键是rule-modal的样式,其他根据项目需求写 .rule-modal { width: 100%; height: ...
  • 在蒙版层加上:@touchmove.prevent 阻止触发滚动,就可以啦 //蒙版 <div class="mark" @touchmove.prevent></div>
  • 解决:在弹窗的外层div上添加时间 @touchmove.prevent即可但是这种方法会导致弹窗无法滚动经测试:此方法只适用弹窗不需要滚动的情况若想弹窗滚动,1.这里使用了vant的弹窗组件,能解决弹窗滚动问题 但是在ios手机上...
  • vue项目中,选择性别是用的一个...要解决这个问题用vue阻止冒泡的属性stop即可这个方法不写也可以,或者写成除了这个地方以外,还有一个弹出层,需要点击弹出层以外的地方关闭这个弹出层,如图:如:toggleexpo...
  • 有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在下面的 )的内容也在滚动。这内外一起滚,就有点尴尬了。 举例,下面两张图里,都有类似的...
  • -- 公用弹窗封装 --> <div class="popupOuter"> <transition name="leave"> <div class="popup" v-if="show"></div> </transition> <transition name="bounce"> <...
  • methods : { //禁止滚动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }...
  • vue页面局部及弹窗–禁止滚动 //移动端禁止滚动 <div class="mask" @touchmove.prevent></div> //PC端禁止滚动 <div class="mask" @scroll.prevent></div>
  • 2.事件对象同时也不是目标区域的子元素 1.jQuery方式 $(document).mouseup(function(e){ var 自定义名字=$('目标对象') //设置目标... //执行关弹窗的代码 } }) 2.JavaScript方式 var 自定义名字= document.getE
  • 弹出弹窗时将body设置成fixed,弹窗消失时将body恢复原位。 popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document.body.style....
  • vue修改鼠标右键弹窗

    2021-09-23 16:13:36
    item)"控制点击效果,事件内部将visible设置为true控制窗口弹出,window.addEventListener(“click”, this.clickOther)监听全局点击事件,@click.left.stop是阻止冒泡,鼠标左键点击弹窗不触发全局事件 效果如图...
  • vue阻止穿透

    2022-03-11 15:29:40
    添加在你要阻止穿透的标签里就可以了 @touchmove.prevent @mousewheel.prevent
  • Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 } //弹...
  • 现在需要一个全局的弹窗,要有promise异步处理 实现后的效果 // components/confirm文件 <template> <div class="popup-wrap" v-if="showPopup"> <div class="popup-center"> <div class=...
  • Modal属性footer-hide设置为true,隐藏默认的modal底部,使用slot插入自定义的底部按钮 1 <Modal title="标题" v-model="modal1" :footer-hide=true> 2 <div slot="footer">...取消<...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,415
精华内容 566
关键字:

vue阻止弹窗