vue 移动鼠标让元素跟着鼠标
时间: 2023-08-04 21:14:44 浏览: 141
字体跟随鼠标移动
你可以使用 Vue 的指令来实现该功能。首先,在 HTML 中为需要跟随鼠标的元素添加一个指令,如下所示:
```html
<div v-mousemove="moveElement"></div>
```
然后在 Vue 实例中定义该指令:
```javascript
Vue.directive('mousemove', {
bind: function (el, binding) {
el.addEventListener('mousemove', function (event) {
binding.value(event, el)
})
}
})
```
接着在 Vue 实例中定义 `moveElement` 方法用于移动元素:
```javascript
new Vue({
el: '#app',
methods: {
moveElement: function (event, el) {
el.style.left = event.pageX + 'px'
el.style.top = event.pageY + 'px'
}
}
})
```
这样,当鼠标在元素上移动时,该元素就会跟随鼠标移动。
阅读全文