[Vuejs]-Vue getting current dom element in style

by

1👍

✅

Looking at the docs for useMouseInElement, it seems you can pass the DOM element using Vue $ref attribute on your div, and just use the built-in isOutside property:

<div
  v-if="work.video === true"
  ref="target"
  class="work_thumbnail"
  :style="{
    transform: [!isOutside ? { cardTransform } :  ''],
    transition: 'transform 0.25s ease-out'
  }"
  @click="showWork(work)"
>
</div>

Note the use of ref() in your setup loop to make the properties reactive:

setup() {
  const target = ref(null)
  const {
    elementX,
    elementY,
    elementHeight,
    elementWidth,
    isOutside
  } = useMouseInElement(target)
    
  return {
    cardTransform,
    elementX,
    elementY,
    elementHeight,
    elementWidth,
    isOutside
  }
}

which you’ll need to add to the import from Vue for the setup:

import { computed, ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
👤Ninowis

Leave a comment