在vue中实现禁止屏幕滚动,禁止屏幕滑动

在Vue中实现禁止屏幕滚动、禁止屏幕滑动可以通过以下两种方式进行：

1. CSS实现

使用CSS可以通过设置html和body元素的样式来实现禁止屏幕滚动：

html, body {
  overflow: hidden;
  height: 100%;
}

设置overflow: hidden可以禁止滚动条出现，而height: 100%则可以使内容填充整个可视区域，从而禁止滑动。

但是CSS实现存在一些缺陷：在弹出层等情况下，屏幕会出现抖动，这是因为弹出层的出现导致了body的高度变化，从而影响了样式。

2. Vue指令实现

vue可以自定义指令，通过自定义指令来实现禁止屏幕滚动、禁止屏幕滑动。

Vue.directive('forbid-scroll', {
  inserted: function(el) {
    el.addEventListener('touchmove', function(event) {
      event.preventDefault();
    }, {passive: false});
  }
});

这里，我们自定义了一个指令名为forbid-scroll，当指令绑定到元素上后，就会在该元素的touchmove事件中阻止默认行为，即禁止屏幕滚动和滑动。

有了自定义指令后，我们就可以在需要禁止屏幕滑动的元素中使用该指令：

<template>
  <div>
    <div class="popup" v-forbid-scroll>
      <!-- 弹出层内容 -->
    </div>
  </div>
</template>

这样就可以在弹出层出现时禁止屏幕滑动，弹出层消失时恢复滑动。

总体来说，通过自定义指令来实现禁止屏幕滑动是比较优雅和可靠的方式。