vue 鼠标拖尾

修改鼠标样式代码

    html,
    body,
    * {
      cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default;
    }

鼠标拖尾组件
follower.vue

<template>
  <div class="follower" ref="follower">
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
    <div class="follower-before"></div>
  </div>
</template>

<script>
export default {
  name: "followerView",
  data() {
    return {
      container: null,
      follower: {
        x: 0,
        y: 0,
      },
      domList: [],
      mouseHover: [],
    };
  },
  mounted() {
    this.container = document.querySelector("html");
    this.domList = document.querySelectorAll(".follower-before");

    // 监听鼠标移动事件，并更新 follower 的位置信息
    this.container.addEventListener("mousemove", (e) => {
      let rect = this.container.getBoundingClientRect();
      let mouseX = e.clientX - rect.left;
      let mouseY = e.clientY - rect.top;
      // 将 follower 的位置设置为当前鼠标的位置
      this.follower.x = mouseX;
      this.follower.y = mouseY;

      // 更新 follower 的样式
      this.updateFollowerStyle();
    });
  },
  methods: {
    updateFollowerStyle() {
      this.mouseHover?.forEach((e) => {
        clearTimeout(e);
      });
      let offsetX = this.follower.x;
      let offsetY = this.follower.y;

      // 创建点位位移
      let count = [0, 1, 2, 3, 4, 5, 6, 7];
      count.forEach((element) => {
        setTimeout(() => {
          // 设置平移和旋转样式
          this.domList[element].style.opacity = `1`;
          this.domList[
            element
          ].style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX}deg)`;
          this.domList[element].style.transition = `all 0.1${element}s`;
        }, element * 10);
        let mouseTimeout = setTimeout(() => {
          this.domList[element].style.opacity = `0`;
        }, 100);

        this.mouseHover.push(mouseTimeout);
      });
    },
  },
};
</script>

<style>
.follower {
  user-select: none;
  pointer-events: none;
  position: fixed;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
}
.follower-before {
  position: fixed;
  top: -5px;
  left: -5px;
  min-width: 25px;
  min-height: 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.follower-before:nth-child(1) {
  background: url("../assets/che-down.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(2) {
  background: url("../assets/che-up.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(3) {
  background: url("../assets/down.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(4) {
  background: url("../assets/lanIcon.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(5) {
  background: url("../assets/tree-1.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(6) {
  background: url("../assets/tree-2.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(7) {
  background: url("../assets/tree-3.png");
  background-size: 100% 100%;
}
.follower-before:nth-child(8) {
  background: url("../assets/up.png");
  background-size: 100% 100%;
}
</style>