From 799f84488cdc8a7ed1d0ddf6b4ed4d9c14744f08 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 22 Dec 2019 09:24:34 +0800
Subject: [PATCH] fix(Picker): avoid Vue 2.6 event bubble issues by manually
 binding events (#5345)

---
 src/picker/PickerColumn.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index c4bf49f7a..4332b428b 100644
--- a/src/picker/PickerColumn.js
+++ b/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 { preventDefault } from '../utils/dom/event';
+import { on, preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 
 const DEFAULT_DURATION = 200;
@@ -60,6 +60,15 @@ export default createComponent({
     this.setIndex(this.currentIndex);
   },
 
+  mounted() {
+    // avoid Vue 2.6 event bubble issues by manually binding events
+    // 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() {
     const { children } = this.$parent;
 
@@ -127,7 +136,8 @@ export default createComponent({
       const distance = this.offset - this.momentumOffset;
       const duration = Date.now() - this.touchStartTime;
       const allowMomentum =
-        duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
+        duration < MOMENTUM_LIMIT_TIME &&
+        Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
 
       if (allowMomentum) {
         this.momentum(distance, duration);
@@ -166,7 +176,9 @@ export default createComponent({
     },
 
     getOptionText(option) {
-      return isObj(option) && this.valueKey in option ? option[this.valueKey] : option;
+      return isObj(option) && this.valueKey in option
+        ? option[this.valueKey]
+        : option;
     },
 
     setIndex(index, userAction) {
@@ -279,13 +291,7 @@ export default createComponent({
     };
 
     return (
-      <div
-        class={[bem(), this.className]}
-        onTouchstart={this.onTouchStart}
-        onTouchmove={this.onTouchMove}
-        onTouchend={this.onTouchEnd}
-        onTouchcancel={this.onTouchEnd}
-      >
+      <div class={[bem(), this.className]}>
         <ul
           ref="wrapper"
           style={wrapperStyle}