Vue手写鼠标移入文字悬浮

你可以使用 Vue 的指令和事件来实现鼠标移入文字悬浮的效果。

首先，你需要在文本上添加一个指令 `v-on:mouseover`，并绑定一个方法 `showTooltip`。当鼠标移入文本时，该方法会被触发。

<template>
  <div>
    <p v-on:mouseover="showTooltip">这里是需要悬浮的文本</p>
  </div>
</template>

接下来，在 `showTooltip` 方法中，你需要创建一个元素用于显示悬浮框，并将其添加到页面中。同时，你还需要获取到鼠标的位置，将悬浮框定位到鼠标的位置。

methods: {
  showTooltip(event) {
    const tooltip = document.createElement("div");
    tooltip.classList.add("tooltip");
    tooltip.innerText = "我是悬浮框";
    document.body.appendChild(tooltip);

    const x = event.clientX;
    const y = event.clientY;
    tooltip.style.left = x + "px";
    tooltip.style.top = y + "px";
  }
}

最后，你需要添加样式来美化悬浮框。

.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 2px 2px 5px #ccc;
}

完整代码如下：

<template>
  <div>
    <p v-on:mouseover="showTooltip">这里是需要悬浮的文本</p>
  </div>
</template>

<script>
export default {
  methods: {
    showTooltip(event) {
      const tooltip = document.createElement("div");
      tooltip.classList.add("tooltip");
      tooltip.innerText = "我是悬浮框";
      document.body.appendChild(tooltip);

      const x = event.clientX;
      const y = event.clientY;
      tooltip.style.left = x + "px";
      tooltip.style.top = y + "px";
    }
  }
};
</script>

<style>
.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 2px 2px 5px #ccc;
}
</style>