vue弹窗屏蔽滑动的两种解决方案
原文：https://www.jianshu.com/p/79d02fc22f8b
序
在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。那么如何处理这一问题呢？
常见问题
我们开发过程中，最常见的问题上文已叙述：打开弹窗后，有滑动操作时，页面也会随之滑动。问题示意图如下：
背景无法屏蔽弹窗.gif
最终效果
我们来看一波正确示范
可滑动弹窗.gif
解决方案
两种解决方案，针对两种不同情况：
- 弹框数据少，无需滑动
- 弹框内数据需要滑动展示
1. 无需滑动弹窗
a. 思路
思路：
vue自带修饰符可解决该问题——@touchmove.prevent
此方案重点在将@touchmove.prevent绑定到弹窗模块，然后动态控制弹窗显示隐藏即可。
b. 效果
不可滑动弹窗.gif
c. 代码
<template>
<div class="modalTest">
<!-- 按钮组 -->
<div class="btn">
<el-button type="success" size="small" @click="modalSign1 = true">弹窗1</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>
</div>
</template>
<script>
export default {
data() {
return {
modalSign1: false, // 弹窗是否打开
}
}
}
</script>
2. 弹框内数据需要滑动展示
a. 思路
首先，我们使用正常的vue操作，比如刚才的修饰符/语法糖进行操作时，虽然可以屏蔽掉背景数据滑动，但是该事件同时会将弹框内的滑动也阻止掉，我们则无法完成该需求。如果这个不行，我们还有别的方法来完成需求吗？
我考虑到一种方案，但是属于DOM操作，与vue的初衷可能不太符合。不过此方案也不矢为一种能够有效解决问题的办法。
思路：
利用cssposition: fixed以及top: x px来固定位置。步骤分解如下：
- 写一个样式放到公共css中备用；
- 点击按钮，控制弹窗显示隐藏；
- 两个方法，一个控制将步骤
1写的css动态添加到body上，另外一个则控制移除该效果；- 添加方法：①获取当前页面距离顶部高度，保存到data中；②给body添加步骤1的css；③设置body的高度为刚才获取到的高度。
- 移除方法： ①将刚才冬天给body添加的css移除；②当前滑动高度设置为data中存储的高度。
b. 效果
可滑动弹窗.gif
c. 两个案例完整代码
<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