如何使用vue写一个跟随文字的弹出提示框

可以使用Vue的指令和组件来实现一个跟随文字的弹出提示框。

首先，在模板中添加一个需要跟随的元素，例如一个按钮：

<template>
  <div>
    <button @mouseover="showTip" @mouseleave="hideTip">Hover Me</button>
    <tip-popup :text="tipText" v-if="show"></tip-popup>
  </div>
</template>

在这里，我们添加了一个按钮，并绑定了两个事件，当鼠标移动到按钮上时，会调用showTip方法来显示提示框；当鼠标离开按钮时，会调用hideTip方法来隐藏提示框。

在模板中，我们还添加了一个tip-popup组件，用于显示提示框。这个组件可以接收一个text属性，用于显示提示文本；还有一个v-if指令，用于控制组件的显示和隐藏。

接下来，我们可以定义showTip和hideTip方法：

export default {
  data() {
    return {
      show: false,
      tipText: 'Hello, World!'
    }
  },
  methods: {
    showTip() {
      this.show = true;
    },
    hideTip() {
      this.show = false;
    }
  }
}

在这里，我们定义了show和tipText两个数据，show用于控制提示框的显示和隐藏，tipText用于保存提示文本。

showTip方法会把show设置为true，从而显示提示框；hideTip方法会把show设置为false，从而隐藏提示框。

最后，我们可以定义tip-popup组件：

<template>
  <div class="tip-popup" :style="{ top: top + 'px', left: left + 'px' }">
    {{ text }}
  </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data() {
    return {
      top: 0,
      left: 0
    }
  },
  mounted() {
    this.setPosition();
    window.addEventListener('resize', this.setPosition);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.setPosition);
  },
  methods: {
    setPosition() {
      const rect = this.$el.getBoundingClientRect();
      this.top = rect.top + rect.height + 10;
      this.left = rect.left + rect.width / 2;
    }
  }
}
</script>

<style scoped>
.tip-popup {
  position: absolute;
  z-index: 999;
  padding: 8px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
</style>

在这里，我们定义了一个tip-popup组件，它接收一个text属性，用于显示提示文本。

在mounted钩子中，我们调用setPosition方法来设置提示框的位置，并添加了一个resize事件监听器，用于在窗口大小改变时重新设置位置。

setPosition方法会使用getBoundingClientRect方法获取元素的位置和大小信息，然后计算出提示框的位置。

最后，我们还添加了一些样式，用于美化提示框的样式。

这样，我们就完成了一个跟随文字的弹出提示框。完整代码如下：

<template>
  <div>
    <button @mouseover="showTip" @mouseleave="hideTip">Hover Me</button>
    <tip-popup :text="tipText" v-if="show"></tip-popup>
  </div>
</template>

<script>
import TipPopup from './TipPopup.vue';

export default {
  components: {
    TipPopup
  },
  data() {
    return {
      show: false,
      tipText: 'Hello, World!'
    }
  },
  methods: {
    showTip() {
      this.show = true;
    },
    hideTip() {
      this.show = false;
    }
  }
}
</script>

<style>
button {
  padding: 8px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
</style>