Vuetify 3 复选框按钮悬停在标签上

Question

我有一个来自新 Vuetify 3 框架的 v-checkbox-btn 组件：

<v-checkbox-btn color="grey-darken-2" class="my-0 py-0 ps-1" density="compact"
                v-model="yesNo" :label="Yes / No" 
                @mouseover="cbMouseOver" @mouseout="cbMouseOut" />

我的问题是，当我将鼠标悬停在标签上时，不会触发鼠标悬停事件。只有复选框会触发它。 我也尝试了@mouseover 和@mouseenter - 相同的行为。我还没有尝试过 Vuetify 版本 2，只是新版本。

我怎样才能触发标签的鼠标悬停方法呢？

Answer 1

<v-checkbox-btn> 组件可能使用 v-model 指令将 yesNo 属性绑定到复选框的选中状态。 @mouseover 和@mouseout 事件侦听器仅附加到复选框，而不是标签。

要触发标签的鼠标悬停方法，您可以将标签文本包装在 <span> 元素中，并将 @mouseover 和 @mouseout 侦听器附加到 <span> 元素而不是 <v-checkbox-btn> 组件。

下面是一个示例，说明如何修改组件以触发标签的鼠标悬停方法：

<v-checkbox-btn color="grey-darken-2" class="my-0 py-0 ps-1" density="compact"
                v-model="yesNo" :label="'Yes / No'"
                @mouseover="cbMouseOver" @mouseout="cbMouseOut" >
  <template v-slot:label>
    <span @mouseover="cbMouseOver" @mouseout="cbMouseOut">{{ yesNo ? 'Yes' : 'No' }}</span>
  </template>
</v-checkbox-btn>

在此示例中，标签文本包装在一个元素中，@mouseover 和@mouseout 侦听器附加到 <span> 元素。 v-slot:label指令用于指定<v-checkbox-btn>组件中标签槽的内容。