useTooltipFollowMousemove

让 el-tooltip 组件跟随鼠标移动

关联组件

无

基础用法

类型

function useTooltipFollowMousemove(): {
  /**
   * 用于传递给 el-tooltip prop 中的 virtual-ref
   */
  virtualRef: Ref<HTMLDivElement>
  /**
   * 鼠标移动事件处理函数
   * @param event 鼠标移动事件
   */
  mousemove: (event: Event) => void
}

使用示例

<script setup lang="ts">
import { ElTooltip } from 'element-plus'
import { useTooltipFollowMousemove } from 'element-plus-ext'

const visible = ref(false)
const { virtualRef, mousemove } = useTooltipFollowMousemove()

onMounted(() => {
  document.addEventListener('mousemove', mousemove)
})

onBeforeUnmount(() => {
  document.removeEventListener('mousemove', mousemove)
})
</script>

<template>
  <el-tooltip 
    v-model:visible="visible"
    content="useTooltipFollowMousemove 使用示例"
    virtual-triggering
    :virtual-ref="virtualRef"
  />

  <el-button @click="visible = !visible">点我{{ visible ? '隐藏' : '显示'}}</el-button>
</template>