vue制作跟随鼠标移动的提示框

可以通过在vue中使用自定义指令来实现跟随鼠标移动的提示框。以下是一个简单的实现：

1. 首先在vue组件中定义自定义指令

directives: {
  tooltip: {
    bind: function(el, binding) {
      el.addEventListener('mousemove', function(e) {
        const tooltip = document.querySelector('.tooltip')
        if (tooltip) {
          tooltip.style.left = e.pageX + 'px'
          tooltip.style.top = e.pageY + 'px'
        }
      })
    },
    inserted: function(el, binding) {
      const tooltip = document.createElement('div')
      tooltip.setAttribute('class', 'tooltip')
      tooltip.innerHTML = binding.value
      document.body.appendChild(tooltip)
    },
    unbind: function(el) {
      const tooltip = document.querySelector('.tooltip')
      if (tooltip) {
        document.body.removeChild(tooltip)
      }
    }
  }
}

2. 在需要使用提示框的元素上使用自定义指令

<div v-tooltip="'This is a tooltip'">Hover over me</div>

3. 使用CSS样式来定义提示框的样式

.tooltip {
  position: absolute;
  background-color: white;
  padding: 5px;
  border: 1px solid black;
}

这样就可以实现一个简单的跟随鼠标移动的提示框了。当鼠标移动到带有自定义指令的元素上时，会在页面上创建一个提示框，并且随着鼠标的移动而跟随移动。当鼠标移出元素时，提示框会被移除。