You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { ref } from 'vue'
|
|
|
|
export function useTouch() {
|
|
const direction = ref<string>('')
|
|
const deltaX = ref<number>(0)
|
|
const deltaY = ref<number>(0)
|
|
const offsetX = ref<number>(0)
|
|
const offsetY = ref<number>(0)
|
|
const startX = ref<number>(0)
|
|
const startY = ref<number>(0)
|
|
|
|
function touchStart(event) {
|
|
const touch = event.touches[0]
|
|
direction.value = ''
|
|
deltaX.value = 0
|
|
deltaY.value = 0
|
|
offsetX.value = 0
|
|
offsetY.value = 0
|
|
startX.value = touch.clientX
|
|
startY.value = touch.clientY
|
|
}
|
|
|
|
function touchMove(event) {
|
|
const touch = event.touches[0]
|
|
deltaX.value = touch.clientX - startX.value
|
|
deltaY.value = touch.clientY - startY.value
|
|
offsetX.value = Math.abs(deltaX.value)
|
|
offsetY.value = Math.abs(deltaY.value)
|
|
direction.value = offsetX.value > offsetY.value ? 'horizontal' : offsetX.value < offsetY.value ? 'vertical' : ''
|
|
}
|
|
|
|
return {
|
|
touchStart,
|
|
touchMove,
|
|
direction,
|
|
deltaX,
|
|
deltaY,
|
|
offsetX,
|
|
offsetY,
|
|
startX,
|
|
startY
|
|
}
|
|
}
|