VueUse useMouseInElement 鼠标hover事件 类似vue 的 onMouseover 事件但是更强大

VueUse useMouseInElement 鼠标hover事件，类似vue的 onMouseover 事件但是更强大，它会返回是否在某元素里面、鼠标位置、元素位置、宽高等信息。

代码示例

<template>
    <div>
       <div ref="el">
        鼠标移到这里试试看
       </div> 
       <pre>{{mouse}}</pre>
      </div>
  </template>
  <script setup lang="ts">
  /*
  vueuse 中文文档
  https://www.itxst.com/vueuse/tutorial.html
  */
  import { reactive, ref } from 'vue'
  import { useMouseInElement  } from '@vueuse/core'
  //元素对象
  const el = ref(null);
  //响应式对象
  const mouse = reactive(useMouseInElement(el))
    // mouse对象结构
    //   {
    //   "x": 221, 鼠标x轴位置
    //   "y": 327, 鼠标y轴位置
    //   "sourceType": "mouse",
    //   "elementX": 190, 元素x轴位置
    //   "elementY": 296, 元素y轴位置
    //   "elementPositionX": 31, 鼠标在元素x轴位置
    //   "elementPositionY": 31, 鼠标在元素y轴位置
    //   "elementHeight": 62, 元素高度
    //   "elementWidth": 152, 元素宽度
    //   "isOutside": true  true在元素外面 false在元素上面
    // }
</script>

在线例子

例子

组件用例

也可以通过UseMouseInElement获取鼠标是否在元素上面

<template>
<UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
  x: {{ elementX }}
  y: {{ elementY }}
  Is Outside: {{ isOutside }}
</UseMouseInElement>
</template>
<script setup lang="ts">  
 //导入组件
 import {UseMouseInElement} from '@vueuse/components'
</script>