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
- };
|