67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div ref="target" class="product">
|
|
<UDrawer
|
|
v-if="isMobile"
|
|
v-model:open="open"
|
|
:class="{ animated: !isSwiping }"
|
|
:style="{ top }"
|
|
>
|
|
<ProductImages />
|
|
|
|
<template #body>
|
|
<ProductDescription />
|
|
</template>
|
|
</UDrawer>
|
|
|
|
<ProductImages v-if="!isMobile" />
|
|
<ProductDescription v-if="!isMobile" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UseSwipeDirection } from '@vueuse/core'
|
|
import { useMediaQuery, useSwipe } from '@vueuse/core'
|
|
import { computed, shallowRef } from 'vue'
|
|
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
const open = ref(false)
|
|
const target = shallowRef<HTMLElement | null>(null)
|
|
const targetHeight = computed(() => target.value?.offsetHeight)
|
|
const top = shallowRef('0')
|
|
|
|
const { isSwiping, lengthY } = useSwipe(
|
|
target,
|
|
{
|
|
passive: false,
|
|
onSwipe(e: TouchEvent) {
|
|
if (targetHeight.value) {
|
|
if (lengthY.value > 200) {
|
|
open.value = true
|
|
}
|
|
}
|
|
},
|
|
onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
|
|
console.log('lengthY.value', lengthY.value)
|
|
if (lengthY.value > 200 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
|
|
open.value = true
|
|
}
|
|
},
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '~/assets/scss/utils' as *;
|
|
|
|
.product {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
@media (max-width: 768px) {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|