chore: upgrade to VueUse v10
This commit is contained in:
parent
076c47b7b0
commit
61526df93f
8 changed files with 106 additions and 61 deletions
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import { SwipeDirection } from '@vueuse/core'
|
||||
import { useGesture } from '@vueuse/gesture'
|
||||
import type { PermissiveMotionProperties } from '@vueuse/motion'
|
||||
import { useReducedMotion } from '@vueuse/motion'
|
||||
|
@ -45,19 +44,19 @@ const { isSwiping, lengthX, lengthY, direction } = useSwipe(target, {
|
|||
passive: false,
|
||||
onSwipeEnd(e, direction) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
if (direction === SwipeDirection.RIGHT && Math.abs(distanceX.value) > threshold) {
|
||||
if (direction === 'right' && Math.abs(distanceX.value) > threshold) {
|
||||
modelValue.value = Math.max(0, modelValue.value - 1)
|
||||
resetZoom()
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
if (direction === SwipeDirection.LEFT && Math.abs(distanceX.value) > threshold) {
|
||||
if (direction === 'left' && Math.abs(distanceX.value) > threshold) {
|
||||
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
|
||||
resetZoom()
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
if (direction === SwipeDirection.UP && Math.abs(distanceY.value) > threshold)
|
||||
if (direction === 'up' && Math.abs(distanceY.value) > threshold)
|
||||
emit('close')
|
||||
},
|
||||
})
|
||||
|
@ -81,14 +80,14 @@ const distanceX = computed(() => {
|
|||
if (width.value === 0)
|
||||
return 0
|
||||
|
||||
if (!isSwiping.value || (direction.value !== SwipeDirection.LEFT && direction.value !== SwipeDirection.RIGHT))
|
||||
if (!isSwiping.value || (direction.value !== 'left' && direction.value !== 'right'))
|
||||
return modelValue.value * 100 * -1
|
||||
|
||||
return (lengthX.value / width.value) * 100 * -1 + (modelValue.value * 100) * -1
|
||||
})
|
||||
|
||||
const distanceY = computed(() => {
|
||||
if (height.value === 0 || !isSwiping.value || direction.value !== SwipeDirection.UP)
|
||||
if (height.value === 0 || !isSwiping.value || direction.value !== 'up')
|
||||
return 0
|
||||
|
||||
return (lengthY.value / height.value) * 100 * -1
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue