diff --git a/src/mixins/touch.ts b/src/mixins/touch.ts index 5412a7465..55b6999ff 100644 --- a/src/mixins/touch.ts +++ b/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); } } }); diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js index 4332b428b..050526347 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 { 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 - // 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); + this.bindTouchEvent(this.$el); }, destroyed() { diff --git a/src/swipe/index.js b/src/swipe/index.js index 788f04b1e..4bc9c7375 100644 --- a/src/swipe/index.js +++ b/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 (