v-mousefollow

让元素跟随鼠标移动的指令。

基础用法

使用 v-mousefollow 指令可以让元素跟随鼠标移动。

查看代码

<template>
  <div class="demo-container">
    <a-card class="card">
      <h3>鼠标跟随效果</h3>
      <div class="follow" v-mousefollow="{ hideCursor: true, zIndex: 9999, easing: 0.3 }">🐭</div>
      <div class="follow-container" v-mousefollow="{ hideCursor: true, zIndex: 9999, easing: 0.05 }"></div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { vMouseFollow } from '@cp-vuedir/core'
</script>

<style scoped>
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  background: radial-gradient(circle, #f0f0f0, #d9d9d9);
}

.card {
  width: 60%;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.follow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.follow-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  mix-blend-mode: exclusion;
  background-color: lightcoral;
}
</style>

API

v-mousefollow 指令可以接收一个配置对象或布尔值作为参数：

interface MouseFollowOptions {
  hideCursor?: boolean // 是否隐藏原始鼠标
  zIndex?: number // 自定义 z-index
}

属性名	说明	类型	是否必选	默认值
v-mousefollow	使元素跟随鼠标移动,可传入配置对象	boolean | MouseFollowOptions	○	-
hideCursor	是否隐藏原始鼠标	boolean	○	false
zIndex	跟随元素的z-index值	number	○	999999
easing	鼠标跟随的缓动效果，数值越大则反应越快，越小则越缓慢。	number	○	0.1

注意事项

注意

• 使用该指令的元素会被设置为 fixed 定位
• 元素的 pointer-events 会被设置为 none，以避免干扰其他元素的交互
• 指令会自动清理事件监听器
• 建议将跟随元素的尺寸控制在合理范围内