Vue如何实现随鼠标位置移动的背景图片动态位移效果

直接基于你提供的原生实现逻辑，用Vue的内置事件绑定和响应式能力改造即可，无需手动查询DOM绑定监听事件。

Vue 2 / Options API 完整代码 #

<template>
  <div 
    class="module"
    @mousemove="handleMouseMove"
    :style="{ backgroundPosition: `${bgPosX}px ${bgPosY}px` }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      bgPosX: 0,
      bgPosY: 0
    }
  },
  methods: {
    handleMouseMove(e) {
      this.bgPosX = -e.offsetX
      this.bgPosY = -e.offsetY
    }
  }
}
</script>

<style scoped>
.module {
  width: 300px;
  height: 300px;
  border: 1px solid white;
  background-image: url(https://images.unsplash.com/photo-1499162526249-f5b8b9ba9923?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=865bf5c0b77ceb22e88de9fd41c5a671);
  background-size: 1000px;
}
</style>

Vue 3 / Composition API 完整代码 #

<template>
  <div 
    class="module"
    @mousemove="handleMouseMove"
    :style="{ backgroundPosition: `${bgPosX}px ${bgPosY}px` }"
  ></div>
</template>

<script setup>
import { ref } from 'vue'
const bgPosX = ref(0)
const bgPosY = ref(0)

const handleMouseMove = (e) => {
  bgPosX.value = -e.offsetX
  bgPosY.value = -e.offsetY
}
</script>

<style scoped>
.module {
  width: 300px;
  height: 300px;
  border: 1px solid white;
  background-image: url(https://images.unsplash.com/photo-1499162526249-f5b8b9ba9923?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=865bf5c0b77ceb22e88de9fd41c5a671);
  background-size: 1000px;
}
</style>

优化提示 #

如果觉得鼠标移动触发过于频繁导致性能问题，可以给handleMouseMove方法加节流控制，限制16ms（对应浏览器60fps刷新频率）触发一次即可。如果有多个同效果模块，把这段逻辑封装为组件直接复用即可。

内容的提问来源于stack exchange，提问作者FeelRightz