vue项目给鼠标添加样式

先在最外层div绑定一个@mousemove.native="move_layer"，用来监听鼠标移动事件。

HTML

<div style="position: absolute;z-index: 1" ref="Layer">
      <div style="width: 60px;height: 60px;background: rgba(86,213,226,0.5);border-radius: 50%"></div>
</div>

JavaScript

在methods里写一个方法。
调整偏移量让div在鼠标正中

move_layer () {
      this.$refs.Layer.style.left = event.clientX + document.body.scrollLeft - 30 + 'px'
      this.$refs.Layer.style.top = event.clientY + document.body.scrollTop - 90 + 'px'
},

最终效果

鼠标截不出来。。。🤨