touch.js 1.8 KB

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