정지된 영상이나 이미지에만 변환 효과를 더하고 싶습니다.이 효과는 계산되어 vue 메서드에 있을 수 없지만, 이 경우 대상 요소를 변경할 수 있습니다.useMouseInElement().그WorkThumbnail.vue구성 요소가 v-for 루프에 있으며 여러 비디오/비디오를 로드합니다.
:style에서 현재의 DOM 요소에 액세스하려면 어떻게 해야 합니까?$event는 해결책이 아닙니다 😅
Work Thumbnail.표시하다
<template> <div
v-if="work.video === false"
class="work_thumbnail"
:style="{
backgroundImage: 'url(' + require(`@/assets/img/works/${work.thumbnail}.jpg`) + ')',
transition: 'transform 0.25s ease-out', transform: [currentWork === selectWork($event) ? { cardTransform } :
'']}"
@mouseover="selectWork($event)"
>
<div class="WorkHeadline">{{work.name}}</div> </div>
<div
v-if="work.video === true"
class="work_thumbnail"
@click="showWork(work)"
:style="{
transform: [currentWork === selectWork($event) ? { cardTransform } :
''],
transition: 'transform 0.25s ease-out'
}"
@mouseover="selectWork($event)"
>
<div class="WorkHeadline">{{work.name}}</div>
<video :poster="require(`@/assets/img/works/${work.vidPreview}.jpg`)" autoplay loop>
<source
:src="require(`@/assets/img/works/${work.thumbnail}.mp4`)"
type="video/mp4">
</video> </div> </template>
<script> import {
useMouseInElement } from '@vueuse/core' import {computed } from 'vue'
var currentWork
const {
elementX,
elementY,
elementHeight,
elementWidth,
isOutside } = useMouseInElement(currentWork)
const cardTransform = computed(() => {
const Max_Rotation = 40
const rX = (
Max_Rotation / 2 -
(elementY.value / elementHeight.value) * Max_Rotation).toFixed(2)
const rY = (
(elementX.value / elementWidth.value) * Max_Rotation - Max_Rotation / 2).toFixed(2)
return isOutside.value
? ''
: `perspective(${elementWidth.value}px) rotateX(${rX}deg) rotateY(${rY}deg)` })
export default {
props: {
work: {
type: Object,
required: true
},
index: {
type: Number,
required: true
}
},
methods: {
showWork(work) {
if (work.direct === true) {
window.open(work.link, '_blank').focus();
}
},
selectWork(event) {
currentWork = event.target
return event.target
},
},
setup() {
return {
cardTransform,
elementX,
elementY,
elementHeight,
elementWidth,
currentWork
}
} }
</script>
부모 컴포넌트(Explore.vue)
<template>
<div class="Section Explore">^
<div class="WorkList flex_c_h flex_wrap gap1">
<WorkThumbnail v-for="(work, index) in works" :key="work" :work="work" :index="index"/>
</div>
</div> </template>
<script> import WorkThumbnail from '@/components/Explore/WorkThumbnail.vue' export default {
name: 'Explore',
components: {
WorkThumbnail
},
computed: {
works() {
return this.$store.state.works
}
},
} </script>