Browse Source

fix(popup): h5 滑动内容穿透修复

richard1015 4 years ago
parent
commit
6ab1cd2cdd
2 changed files with 32 additions and 1 deletions
  1. 4 0
      src/packages/__VUE/overlay/index.scss
  2. 28 1
      src/packages/__VUE/overlay/index.vue

+ 4 - 0
src/packages/__VUE/overlay/index.scss

@@ -16,3 +16,7 @@
   height: 100%;
   background-color: $overlay-bg-color;
 }
+
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}

+ 28 - 1
src/packages/__VUE/overlay/index.vue

@@ -12,7 +12,16 @@
   </Transition>
 </template>
 <script lang="ts">
-import { CSSProperties, PropType, computed } from 'vue';
+import {
+  CSSProperties,
+  PropType,
+  computed,
+  watch,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  onActivated
+} from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('overlay');
 const overlayProps = {
@@ -59,6 +68,24 @@ export default create({
       };
     });
 
+    watch(props.lockScroll, (value) => {
+      value ? lock() : unlock();
+    });
+
+    const lock = () => {
+      if (props.lockScroll) {
+        document.body.classList.add('nut-overflow-hidden');
+      }
+    };
+    const unlock = () => {
+      document.body.classList.remove('nut-overflow-hidden');
+    };
+
+    onDeactivated(unlock);
+    onBeforeUnmount(unlock);
+    onMounted(lock);
+    onActivated(lock);
+
     const style = computed(() => {
       return {
         animationDuration: `${props.duration}s`,