Browse Source

fix(overlay、popup): add catch-move

richard1015 4 years ago
parent
commit
b0bbac7684
2 changed files with 9 additions and 36 deletions
  1. 5 12
      src/packages/__VUE/overlay/index.taro.vue
  2. 4 24
      src/packages/__VUE/popup/index.taro.vue

+ 5 - 12
src/packages/__VUE/overlay/index.taro.vue

@@ -1,12 +1,9 @@
 <template>
   <Transition name="overlay-fade">
-    <view
-      :class="classes"
-      @touchmove.stop="touchmove"
-      @click="onClick"
-      :style="style"
-      v-show="visible"
-    >
+    <view v-if="lockScroll" :class="classes" @click="onClick" :style="style" v-show="visible" :catch-move="true">
+      <slot></slot>
+    </view>
+    <view v-else :class="classes" @click="onClick" :style="style" v-show="visible">
       <slot></slot>
     </view>
   </Transition>
@@ -67,10 +64,6 @@ export default create({
       };
     });
 
-    const touchmove = (e: TouchEvent) => {
-      if (props.lockScroll) e.preventDefault();
-    };
-
     const onClick = (e: MouseEvent) => {
       emit('click', e);
       if (props.closeOnClickOverlay) {
@@ -78,7 +71,7 @@ export default create({
       }
     };
 
-    return { classes, style, touchmove, onClick };
+    return { classes, style, onClick };
   }
 });
 </script>

+ 4 - 24
src/packages/__VUE/popup/index.taro.vue

@@ -11,17 +11,8 @@
       :duration="duration"
       @click="onClickOverlay"
     />
-    <Transition
-      :name="transitionName"
-      @after-enter="onOpened"
-      @after-leave="onClosed"
-    >
-      <view
-        v-show="visible"
-        :class="classes"
-        :style="popStyle"
-        @click="onClick"
-      >
+    <Transition :name="transitionName" @after-enter="onOpened" @after-leave="onClosed">
+      <view v-show="visible" :class="classes" :style="popStyle" @click="onClick" :catch-move="true">
         <slot v-if="showSlot"></slot>
         <view
           v-if="closeable"
@@ -109,16 +100,7 @@ export default create({
   props: {
     ...popupProps
   },
-  emits: [
-    'click',
-    'click-close-icon',
-    'open',
-    'close',
-    'opend',
-    'closed',
-    'update:visible',
-    'click-overlay'
-  ],
+  emits: ['click', 'click-close-icon', 'open', 'close', 'opend', 'closed', 'update:visible', 'click-overlay'],
   setup(props, { emit }) {
     const { proxy } = getCurrentInstance() as any;
     const state = reactive({
@@ -229,9 +211,7 @@ export default create({
     watch(
       () => props.position,
       (value) => {
-        value === 'center'
-          ? (state.transitionName = 'popup-fade')
-          : (state.transitionName = `popup-slide-${value}`);
+        value === 'center' ? (state.transitionName = 'popup-fade') : (state.transitionName = `popup-slide-${value}`);
       }
     );
     return {