如何在Vue中优雅实现多个Tooltip的点击切换功能

针对你遇到的问题，最符合Vue思想的解决方案是封装独立的Tooltip组件，既实现复用，又能避免操作DOM和状态同步的问题，具体实现如下：

1. 封装Tooltip组件 #

把单个Tooltip的逻辑抽成独立组件，每个实例拥有自己的状态，互不干扰：

<template>
  <div v-if="content.length > 0" class="c-tooltip">
    <a @click="isVisible = !isVisible" class="c-tooltip--link">
      {{ linkText }}
    </a>
    <!-- 用v-show控制内容显示，适合频繁切换场景 -->
    <div 
      v-html="content" 
      v-show="isVisible" 
      class="c-tooltip--content"
    ></div>
  </div>
</template>

<script>
export default {
  // 通过props接收外部传入的文本和内容
  props: {
    linkText: {
      type: String,
      required: true
    },
    content: {
      type: String,
      required: true
    }
  },
  // 每个组件实例独立维护显示状态
  data() {
    return {
      isVisible: false
    }
  }
}
</script>

<style scoped>
.c-tooltip--content {
  /* 初始隐藏，v-show会自动控制display属性 */
  display: none;
}
/* 可选：自定义Tooltip样式 */
.c-tooltip--link {
  cursor: pointer;
  color: #2c3e50;
}
.c-tooltip--content {
  margin-top: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

2. 父组件中复用Tooltip #

在需要使用Tooltip的地方，直接引入组件并传入对应的属性即可：

<template>
  <div class="page-content">
    <!-- 第一个Tooltip -->
    <Tooltip 
      :link-text="$label('toolTipLink1')" 
      :content="global.content1"
    />
    <!-- 第二个Tooltip -->
    <Tooltip 
      :link-text="$label('toolTipLink2')" 
      :content="global.content2"
    />
    <!-- 可以无限添加新的Tooltip实例 -->
  </div>
</template>

<script>
// 引入封装好的Tooltip组件
import Tooltip from './components/Tooltip.vue'

export default {
  components: {
    Tooltip
  },
  data() {
    return {
      global: {
        content1: '这是第一个Tooltip的内容',
        content2: '这是第二个Tooltip的内容'
      }
    }
  }
}
</script>

关键问题解决说明 #

• 避免DOM操作：通过组件内部的isVisible响应式状态控制显示，完全遵循Vue声明式编程思想，不需要手动操作DOM元素的class。
• 解决状态同步问题：每个Tooltip组件实例都有独立的isVisible变量，点击其中一个只会影响自身，不会触发其他Tooltip的显示/隐藏。
• v-if vs v-show的选择：
  • 外层的v-if="content.length > 0"：没有内容时直接不渲染整个Tooltip结构，节省DOM资源，合理。
  • 内容区的v-show="isVisible"：Tooltip的显示/隐藏属于频繁切换操作，v-show仅通过CSS控制display，性能比v-if（销毁/重建DOM）更好。

内容的提问来源于stack exchange，提问作者mat