fix(Swipe): avoid Vue 2.6 event bubble issues (#5346)

src/mixins/touch.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { on } from '../utils/dom/event';
 
 const MIN_DISTANCE = 10;
 
@@ -42,7 +43,8 @@ export const TouchMixin = Vue.extend({
       this.deltaY = touch.clientY - this.startY;
       this.offsetX = Math.abs(this.deltaX);
       this.offsetY = Math.abs(this.deltaY);
-      this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
+      this.direction =
+        this.direction || getDirection(this.offsetX, this.offsetY);
     },
 
     resetTouchStatus() {
@@ -51,6 +53,16 @@ export const TouchMixin = Vue.extend({
       this.deltaY = 0;
       this.offsetX = 0;
       this.offsetY = 0;
+    },
+
+    // avoid Vue 2.6 event bubble issues by manually binding events
+    // https://github.com/youzan/vant/issues/3015
+    bindTouchEvent(el: HTMLElement) {
+      const { onTouchStart, onTouchMove, onTouchEnd } = (this as any);
+      on(el, 'touchstart', onTouchStart);
+      on(el, 'touchmove', onTouchMove);
+      on(el, 'touchend', onTouchEnd);
+      on(el, 'touchcancel', onTouchEnd);
     }
   }
 });

src/picker/PickerColumn.js

@@ -1,7 +1,7 @@
 import { deepClone } from '../utils/deep-clone';
 import { createNamespace, isObj } from '../utils';
 import { range } from '../utils/format/number';
-import { on, preventDefault } from '../utils/dom/event';
+import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 
 const DEFAULT_DURATION = 200;
@@ -61,12 +61,7 @@ export default createComponent({
   },
 
   mounted() {
-    // avoid Vue 2.6 event bubble issues by manually binding events
+    this.bindTouchEvent(this.$el);
-    // https://github.com/youzan/vant/issues/3015
-    on(this.$el, 'touchstart', this.onTouchStart);
-    on(this.$el, 'touchmove', this.onTouchMove);
-    on(this.$el, 'touchend', this.onTouchEnd);
-    on(this.$el, 'touchcancel', this.onTouchEnd);
   },
 
   destroyed() {

src/swipe/index.js

@@ -130,10 +130,16 @@ export default createComponent({
 
     minOffset() {
       const rect = this.$el.getBoundingClientRect();
-      return (this.vertical ? rect.height : rect.width) - this.size * this.count;
+      return (
+        (this.vertical ? rect.height : rect.width) - this.size * this.count
+      );
     }
   },
 
+  mounted() {
+    this.bindTouchEvent(this.$refs.track);
+  },
+
   methods: {
     // initialize swipe position
     initialize(active = this.initialSwipe) {
@@ -344,15 +350,7 @@ export default createComponent({
   render() {
     return (
       <div class={bem()}>
-        <div
+        <div ref="track" style={this.trackStyle} class={bem('track')}>
-          ref="track"
-          style={this.trackStyle}
-          class={bem('track')}
-          onTouchstart={this.onTouchStart}
-          onTouchmove={this.onTouchMove}
-          onTouchend={this.onTouchEnd}
-          onTouchcancel={this.onTouchEnd}
-        >
           {this.slots()}
         </div>
         {this.genIndicator()}