vue 鼠标移动特效

Vue中实现鼠标移动特效有很多种方式，以下是其中一种常见的实现方法：

首先，在Vue组件中，你可以使用`@mousemove`事件监听鼠标移动事件。在事件处理函数中，你可以获取鼠标的坐标，并计算出相对于元素的位置。

例如，假设你要实现一个鼠标移动时产生气泡效果的特效。你可以在组件的`data`中定义一个数组，用于存储气泡的位置信息。然后，在`mounted`钩子函数中添加事件监听器。

<template>
  <div class="container" @mousemove="handleMouseMove">
    <div class="bubble" v-for="(bubble, index) in bubbles" :key="index" :style="{ top: bubble.y + 'px', left: bubble.x + 'px' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bubbles: [] // 存储气泡位置信息的数组
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleMouseMove(event) {
      const x = event.clientX;
      const y = event.clientY;
      this.bubbles.push({ x, y });
    },
    handleResize() {
      // 处理窗口大小变化的逻辑
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.bubble {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0000;
}
</style>

在上述代码中，我们监听了鼠标移动事件`@mousemove`，并在事件处理函数`handleMouseMove`中获取鼠标的坐标`event.clientX`和`event.clientY`。然后将坐标信息存储在`bubbles`数组中，并通过`v-for`指令动态渲染气泡。

你可以根据自己的需求进行样式和动画的调整，例如改变气泡的大小、颜色以及添加过渡动画等。以上只是一个简单的示例，希望对你有所帮助。