vue实现tooltips组件

实现基础 Tooltip 组件

创建一个名为 Tooltip.vue 的单文件组件，包含模板、样式和逻辑：

<template>
  <div class="tooltip-container">
    <slot></slot>
    <div v-if="show" class="tooltip" :style="{ top: `${y}px`, left: `${x}px` }">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: String,
    position: {
      type: String,
      default: 'bottom'
    }
  },
  data() {
    return {
      show: false,
      x: 0,
      y: 0
    }
  },
  methods: {
    updatePosition(el) {
      const rect = el.getBoundingClientRect()
      switch(this.position) {
        case 'top':
          this.x = rect.left + rect.width / 2
          this.y = rect.top - 10
          break
        case 'bottom':
          this.x = rect.left + rect.width / 2
          this.y = rect.top + rect.height + 10
          break
        case 'left':
          this.x = rect.left - 10
          this.y = rect.top + rect.height / 2
          break
        case 'right':
          this.x = rect.left + rect.width + 10
          this.y = rect.top + rect.height / 2
          break
      }
    }
  }
}
</script>

<style scoped>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: fixed;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 100;
  transform: translate(-50%, 0);
}
</style>

添加触发逻辑

在组件中添加鼠标事件处理逻辑：

methods: {
  handleMouseEnter(e) {
    this.show = true
    this.updatePosition(e.currentTarget)
  },
  handleMouseLeave() {
    this.show = false
  }
},
mounted() {
  const slotEl = this.$slots.default[0].elm
  slotEl.addEventListener('mouseenter', this.handleMouseEnter)
  slotEl.addEventListener('mouseleave', this.handleMouseLeave)
},
beforeDestroy() {
  const slotEl = this.$slots.default[0].elm
  slotEl.removeEventListener('mouseenter', this.handleMouseEnter)
  slotEl.removeEventListener('mouseleave', this.handleMouseLeave)
}

添加动画效果

在样式中添加过渡动画：

.tooltip {
  /* 原有样式 */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip.show {
  opacity: 1;
}

更新模板中的 class 绑定：

<div v-if="show" class="tooltip" :class="{ show }" :style="{ top: `${y}px`, left: `${x}px` }">

使用组件示例

在父组件中使用 Tooltip：

<template>
  <div>
    <Tooltip content="这是提示信息" position="top">
      <button>悬停查看提示</button>
    </Tooltip>
  </div>
</template>

<script>
import Tooltip from './Tooltip.vue'

export default {
  components: {
    Tooltip
  }
}
</script>

支持 HTML 内容

修改组件以支持插槽内容：

<template>
  <div class="tooltip-container">
    <slot name="trigger"></slot>
    <div v-if="show" class="tooltip" :class="{ show }" :style="{ top: `${y}px`, left: `${x}px` }">
      <slot name="content">{{ content }}</slot>
    </div>
  </div>
</template>

使用示例：

<Tooltip>
  <template v-slot:trigger>
    <button>悬停查看</button>
  </template>
  <template v-slot:content>
    <div style="color: red;">自定义HTML内容</div>
  </template>
</Tooltip>

添加箭头指示器

更新样式添加箭头：

.tooltip::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip[data-position="top"]::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: #333 transparent transparent transparent;
}

.tooltip[data-position="bottom"]::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #333 transparent;
}

.tooltip[data-position="left"]::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent #333;
}

.tooltip[data-position="right"]::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent #333 transparent transparent;
}

更新模板添加 data-position 属性：

<div v-if="show" class="tooltip" :class="{ show }" :data-position="position" :style="{ top: `${y}px`, left: `${x}px` }">