69 lines
1.9 KiB
JavaScript
69 lines
1.9 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.TouchMixin = void 0;
|
|
|
|
var _event = require("../utils/dom/event");
|
|
|
|
function getDirection(x, y) {
|
|
if (x > y) {
|
|
return 'horizontal';
|
|
}
|
|
|
|
if (y > x) {
|
|
return 'vertical';
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
var TouchMixin = {
|
|
data: function data() {
|
|
return {
|
|
direction: ''
|
|
};
|
|
},
|
|
methods: {
|
|
touchStart: function touchStart(event) {
|
|
this.resetTouchStatus();
|
|
this.startX = event.touches[0].clientX;
|
|
this.startY = event.touches[0].clientY;
|
|
},
|
|
touchMove: function touchMove(event) {
|
|
var touch = event.touches[0]; // safari back will set clientX to negative number
|
|
|
|
this.deltaX = touch.clientX < 0 ? 0 : touch.clientX - this.startX;
|
|
this.deltaY = touch.clientY - this.startY;
|
|
this.offsetX = Math.abs(this.deltaX);
|
|
this.offsetY = Math.abs(this.deltaY); // lock direction when distance is greater than a certain value
|
|
|
|
var LOCK_DIRECTION_DISTANCE = 10;
|
|
|
|
if (!this.direction || this.offsetX < LOCK_DIRECTION_DISTANCE && this.offsetY < LOCK_DIRECTION_DISTANCE) {
|
|
this.direction = getDirection(this.offsetX, this.offsetY);
|
|
}
|
|
},
|
|
resetTouchStatus: function resetTouchStatus() {
|
|
this.direction = '';
|
|
this.deltaX = 0;
|
|
this.deltaY = 0;
|
|
this.offsetX = 0;
|
|
this.offsetY = 0;
|
|
},
|
|
// avoid Vue 2.6 event bubble issues by manually binding events
|
|
// https://github.com/vant-ui/vant/issues/3015
|
|
bindTouchEvent: function bindTouchEvent(el) {
|
|
var onTouchStart = this.onTouchStart,
|
|
onTouchMove = this.onTouchMove,
|
|
onTouchEnd = this.onTouchEnd;
|
|
(0, _event.on)(el, 'touchstart', onTouchStart);
|
|
(0, _event.on)(el, 'touchmove', onTouchMove);
|
|
|
|
if (onTouchEnd) {
|
|
(0, _event.on)(el, 'touchend', onTouchEnd);
|
|
(0, _event.on)(el, 'touchcancel', onTouchEnd);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
exports.TouchMixin = TouchMixin; |