Vue-使用鼠标位置移动背景

Question

我是vuejs的新手！。我想在鼠标位置移动时移动背景图像，如何在vuejs中做到这一点。

const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});

.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;
}

<div class="module" id="module">

</div>

Answer 1

只需将@mousemove添加到您的div中，并链接到将处理您的行为的方法。您也可以通过ref创建对此元素的引用。遗憾的是，我无法在平板电脑上创建一个代码块，但你可以在这里查看这个答案，这正是你所需要的。