touch.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import { on } from '../utils/dom/event';
  2. var MIN_DISTANCE = 10;
  3. function getDirection(x, y) {
  4. if (x > y && x > MIN_DISTANCE) {
  5. return 'horizontal';
  6. }
  7. if (y > x && y > MIN_DISTANCE) {
  8. return 'vertical';
  9. }
  10. return '';
  11. }
  12. export var TouchMixin = {
  13. data: function data() {
  14. return {
  15. direction: ''
  16. };
  17. },
  18. methods: {
  19. touchStart: function touchStart(event) {
  20. this.resetTouchStatus();
  21. this.startX = event.touches[0].clientX;
  22. this.startY = event.touches[0].clientY;
  23. },
  24. touchMove: function touchMove(event) {
  25. var touch = event.touches[0]; // Fix: Safari back will set clientX to negative number
  26. this.deltaX = touch.clientX < 0 ? 0 : touch.clientX - this.startX;
  27. this.deltaY = touch.clientY - this.startY;
  28. this.offsetX = Math.abs(this.deltaX);
  29. this.offsetY = Math.abs(this.deltaY);
  30. this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
  31. },
  32. resetTouchStatus: function resetTouchStatus() {
  33. this.direction = '';
  34. this.deltaX = 0;
  35. this.deltaY = 0;
  36. this.offsetX = 0;
  37. this.offsetY = 0;
  38. },
  39. // avoid Vue 2.6 event bubble issues by manually binding events
  40. // https://github.com/youzan/vant/issues/3015
  41. bindTouchEvent: function bindTouchEvent(el) {
  42. var onTouchStart = this.onTouchStart,
  43. onTouchMove = this.onTouchMove,
  44. onTouchEnd = this.onTouchEnd;
  45. on(el, 'touchstart', onTouchStart);
  46. on(el, 'touchmove', onTouchMove);
  47. if (onTouchEnd) {
  48. on(el, 'touchend', onTouchEnd);
  49. on(el, 'touchcancel', onTouchEnd);
  50. }
  51. }
  52. }
  53. };