74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
|
import { reactive } from "vue"
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 触碰屏幕钩子函数
|
||
|
|
* @return { Function } 暴露钩子
|
||
|
|
*/
|
||
|
|
export function useTouch () {
|
||
|
|
// 最小移动距离
|
||
|
|
const MIN_DISTANCE = 10;
|
||
|
|
|
||
|
|
const touch = reactive({
|
||
|
|
direction: '',
|
||
|
|
deltaX: 0,
|
||
|
|
deltaY: 0,
|
||
|
|
offsetX: 0,
|
||
|
|
offsetY: 0
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 计算距离
|
||
|
|
* @return { string } 空字符串
|
||
|
|
*/
|
||
|
|
const getDirection = (x: number, y: number) => {
|
||
|
|
if (x > y && x > MIN_DISTANCE) {
|
||
|
|
return 'horizontal';
|
||
|
|
}
|
||
|
|
if (y > x && y > MIN_DISTANCE) {
|
||
|
|
return 'vertical';
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 重置参数
|
||
|
|
*/
|
||
|
|
const resetTouchStatus = () => {
|
||
|
|
touch.direction = '';
|
||
|
|
touch.deltaX = 0;
|
||
|
|
touch.deltaY = 0;
|
||
|
|
touch.offsetX = 0;
|
||
|
|
touch.offsetY = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 触发
|
||
|
|
*/
|
||
|
|
const touchStart = (event: any) => {
|
||
|
|
resetTouchStatus();
|
||
|
|
const events = event.touches[0];
|
||
|
|
touch.startX = events.clientX;
|
||
|
|
touch.startY = events.clientY;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description 移动
|
||
|
|
*/
|
||
|
|
const touchMove = (event: any) => {
|
||
|
|
const events = event.touches[0];
|
||
|
|
touch.deltaX = events.clientX - touch.startX;
|
||
|
|
touch.deltaY = events.clientY - touch.startY;
|
||
|
|
touch.offsetX = Math.abs(touch.deltaX);
|
||
|
|
touch.offsetY = Math.abs(touch.deltaY);
|
||
|
|
touch.direction =
|
||
|
|
touch.direction || getDirection(touch.offsetX, touch.offsetY);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
touch,
|
||
|
|
resetTouchStatus,
|
||
|
|
touchStart,
|
||
|
|
touchMove
|
||
|
|
}
|
||
|
|
}
|