如何为Vue Multiselect禁用选项添加Tooltip/标题并处理点击问题？

核心思路 #

要实现禁用选项显示Tooltip，需先让禁用选项能接收鼠标事件（移除默认的pointer-events: none），同时阻止禁用选项的点击类事件，避免触发组件内部选择逻辑导致报错。

具体实现步骤 #

1. 调整CSS，恢复禁用选项的鼠标事件响应 #

Vue Multiselect给禁用选项默认添加了.multiselect__option--disabled类，并设置pointer-events: none，导致Tooltip无法触发。我们需要覆盖这个样式（建议添加自定义容器类避免全局污染）：

.select-buy-currency .multiselect__option--disabled {
  pointer-events: auto !important;
  /* 保留禁用状态的视觉效果 */
  opacity: 0.6;
}

2. 在自定义选项模板中阻止禁用选项的点击事件 #

在option插槽模板里，针对禁用选项动态设置Tooltip内容，并阻止mousedown和click事件（这两个是触发组件选择逻辑的关键事件）：

<multiselect
    v-model="buyCurrency"
    :options="canBuyCurrencies"
    :show-labels="false"
    :searchable="false"
    :allow-empty="false"
    :clear-on-select="false"
    :close-on-select="true"
    class="select-buy-currency"
    @select="handleBuyCurrencyChange"
>
  <template slot="option" slot-scope="props">
    <div 
      :title="props.$isDisabled ? '该货币暂不可用' : ''" 
      class="d-flex flex-row justify-content-apart align-items-center"
      <!-- 阻止禁用选项的点击类事件，避免组件内部报错 -->
      @mousedown.prevent="props.$isDisabled && true"
      @click.prevent="props.$isDisabled && true"
    >
      <img
          class="option__image"
          :src="`/img/flags/${props.option.code}.svg`"
          :alt="props.option.code"
      />
      <div class="option__desc">
        <span class="option__title">
          {{ props.option.code }}
        </span>
      </div>
    </div>
  </template>
</multiselect>

原理说明 #

• 恢复pointer-events: auto后，鼠标可悬停在禁用选项上，触发title属性显示Tooltip；
• 通过@mousedown.prevent和@click.prevent阻止禁用选项的点击事件传递到Vue Multiselect外层元素，避免触发组件内部选择逻辑，也就不会出现Cannot read properties of undefined (reading 'every')的报错；
• 非禁用选项不受影响，依然可以正常选择。

内容的提问来源于stack exchange，提问作者M.KH