73 lines
1.6 KiB
TypeScript
73 lines
1.6 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
|
|
}
|
|
}
|