Vuetify 3中阻止v-select内Tooltip图标点击事件冒泡

在自定义的 <s-tooltip> 组件中，点击激活器 <span> 时的事件会冒泡到父组件 <v-select>，导致下拉菜单意外打开。只需在该 <span> 的点击事件上添加 .stop 修饰符，阻止事件向上传播即可。

修改后的 <s-tooltip> 组件激活器部分代码：

<template #activator="{ props }">
  <span @click.stop="toggleTooltip" v-bind="props">
    <slot name="content">
      <v-icon class="tooltip-icon" color="primary" size="small" @click="toggleTooltip" @click.stop.prevent> fas fa-info-circle </v-icon>
    </slot>
  </span>
</template>

原理说明 #

.stop 修饰符会终止事件的冒泡传播，点击 tooltip 图标时，事件只会停留在 <span> 元素层面，不会触发 <v-select> 的下拉菜单打开逻辑。

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