1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- import { on } from '../utils/dom/event';
- var MIN_DISTANCE = 10;
- function getDirection(x, y) {
- if (x > y && x > MIN_DISTANCE) {
- return 'horizontal';
- }
- if (y > x && y > MIN_DISTANCE) {
- return 'vertical';
- }
- return '';
- }
- export 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]; // Fix: 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);
- this.direction = 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/youzan/vant/issues/3015
- bindTouchEvent: function bindTouchEvent(el) {
- var onTouchStart = this.onTouchStart,
- onTouchMove = this.onTouchMove,
- onTouchEnd = this.onTouchEnd;
- on(el, 'touchstart', onTouchStart);
- on(el, 'touchmove', onTouchMove);
- if (onTouchEnd) {
- on(el, 'touchend', onTouchEnd);
- on(el, 'touchcancel', onTouchEnd);
- }
- }
- }
- };
|