blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 14:39:16 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): avoid Vue 2.6 event bubble issues by manually binding events (#5345)

Browse Source
This commit is contained in:
neverland 2019-12-22 09:24:34 +08:00 committed by GitHub
parent 3ef0d936b6
commit 799f84488c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/picker/PickerColumn.js
View File

@ -1,7 +1,7 @@
import { deepClone } from '../utils/deep-clone'; import { deepClone } from '../utils/deep-clone';
import { createNamespace, isObj } from '../utils'; import { createNamespace, isObj } from '../utils';
import { range } from '../utils/format/number'; import { range } from '../utils/format/number';
import { preventDefault } from '../utils/dom/event'; import { on, preventDefault } from '../utils/dom/event';
import { TouchMixin } from '../mixins/touch'; import { TouchMixin } from '../mixins/touch';
const DEFAULT_DURATION = 200; const DEFAULT_DURATION = 200;
@ -60,6 +60,15 @@ export default createComponent({
this.setIndex(this.currentIndex); 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() { destroyed() {
const { children } = this.$parent; const { children } = this.$parent;
@ -127,7 +136,8 @@ export default createComponent({
const distance = this.offset - this.momentumOffset; const distance = this.offset - this.momentumOffset;
const duration = Date.now() - this.touchStartTime; const duration = Date.now() - this.touchStartTime;
const allowMomentum = const allowMomentum =
duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE; duration < MOMENTUM_LIMIT_TIME &&
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
if (allowMomentum) { if (allowMomentum) {
this.momentum(distance, duration); this.momentum(distance, duration);
@ -166,7 +176,9 @@ export default createComponent({
}, },
getOptionText(option) { 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) { setIndex(index, userAction) {
@ -279,13 +291,7 @@ export default createComponent({
}; };
return ( return (
<div <div class={[bem(), this.className]}>
class={[bem(), this.className]}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
>
<ul <ul
ref="wrapper" ref="wrapper"
style={wrapperStyle} style={wrapperStyle}