touch.js 947 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. const MIN_DISTANCE = 10;
  2. function getDirection(x, y) {
  3. if (x > y && x > MIN_DISTANCE) {
  4. return 'horizontal';
  5. }
  6. if (y > x && y > MIN_DISTANCE) {
  7. return 'vertical';
  8. }
  9. return '';
  10. }
  11. export const TouchMixin = {
  12. data() {
  13. return {
  14. direction: ''
  15. };
  16. },
  17. methods: {
  18. touchStart(event) {
  19. this.resetTouchStatus();
  20. this.startX = event.touches[0].clientX;
  21. this.startY = event.touches[0].clientY;
  22. },
  23. touchMove(event) {
  24. const touch = event.touches[0];
  25. this.deltaX = touch.clientX - this.startX;
  26. this.deltaY = touch.clientY - this.startY;
  27. this.offsetX = Math.abs(this.deltaX);
  28. this.offsetY = Math.abs(this.deltaY);
  29. this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
  30. },
  31. resetTouchStatus() {
  32. this.direction = '';
  33. this.deltaX = 0;
  34. this.deltaY = 0;
  35. this.offsetX = 0;
  36. this.offsetY = 0;
  37. }
  38. }
  39. };