vue中优雅的解决IOS滑动穿透问题

添加指令

在滚动的最外层元素使用该指令

1.适用于弹窗内部不需要滚动的场景

Vue.directive('lockScrollBack', {
  update: function (el, binding, vnode) {
    if (binding.value.includes(true)) {
      el.addEventListener('touchmove', bodyScroll, false)
    } else {
      el.removeEventListener('touchmove', bodyScroll, false)
    }
  },
});

2.适用于弹窗也需要滚动的场景
通过overflow = hidden的方式解决滑动穿透,
*添加该指令的元素需要添加样式 overflow-y: auto;

Vue.directive('lockScroll', {
  update: function (el, binding, vnode) {
    if (Array.isArray(binding.value)) {
      if (binding.value.includes(true)) {
        el.style.overflow = 'hidden'
      } else {
        el.style.overflow = 'auto'
      }
    } else if (Object.prototype.toString(binding.value)=='[object Object]') {
      el.style.overflow = 'auto';
      for (let key in binding.value) {
        if (binding.value[key]) {
          el.style.overflow = 'hidden';
          break;
        }
      }
    }
  },
});