| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 | import { ref } from "vue";function getDirection(x, y) {  if (x > y) {    return "horizontal";  }  if (y > x) {    return "vertical";  }  return "";}function useTouch() {  const startX = ref(0);  const startY = ref(0);  const deltaX = ref(0);  const deltaY = ref(0);  const offsetX = ref(0);  const offsetY = ref(0);  const direction = ref("");  const isVertical = () => direction.value === "vertical";  const isHorizontal = () => direction.value === "horizontal";  const reset = () => {    deltaX.value = 0;    deltaY.value = 0;    offsetX.value = 0;    offsetY.value = 0;    direction.value = "";  };  const start = (event) => {    reset();    startX.value = event.touches[0].clientX;    startY.value = event.touches[0].clientY;  };  const move = (event) => {    const touch = event.touches[0];    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;    deltaY.value = touch.clientY - startY.value;    offsetX.value = Math.abs(deltaX.value);    offsetY.value = Math.abs(deltaY.value);    const LOCK_DIRECTION_DISTANCE = 10;    if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) {      direction.value = getDirection(offsetX.value, offsetY.value);    }  };  return {    move,    start,    reset,    startX,    startY,    deltaX,    deltaY,    offsetX,    offsetY,    direction,    isVertical,    isHorizontal  };}export {  useTouch};
 |