javascript - 在自定义(非原生)组件上使用 v-tooltip

Question

我有一个在应用程序范围内使用的自定义组件。但是，在某些地方，我想在悬停在这个组件上时显示工具提示，根据 vuetify 文档，这应该有效，但它不起作用，因为 <custom-component />不是 native 组件。 并为 native 组件提供此功能 .native将使用修饰符。

示例:@click.native="someMethod" 我该怎么做才能显示 v-tooltip。

我试过包装 <custom-component />在一个 div 中，但它不起作用。

下面是获取要点的示例代码。

<v-tooltip>
  <template v-slot:activator="{ on }">
    <custom-component v-on="on" />
  </template>
  <span>Tooltip text</span>
</v-tooltip>

Answer 1

custom-component应该从带有 v-on="$listeners" 的元素转发事件 https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

I have tried wrapping <custom-component /> in a div but it isn't working

如果您这样做，则需要将事件绑定(bind)到 div:

<div v-on="on">
  <custom-component />
</div>