在 vuetify 2.0 中的 v-menu 激活器中使用 v-tooltip [英] Using v-tooltip inside v-menu activator in vuetify 2.0

问题描述

如何在 v-menu 激活器中使用 v-tooltip 和 vuetify 2.0?以前它使用 slot="activator" 工作.

How to use v-tooltip inside v-menu activator with vuetify 2.0? Previously it was working using slot="activator".

这就是我想要结合的:

<v-menu>
  <template v-slot:activator="{on}">
    <v-btn v-on="on">Menu Trigger</v-btn>
  </template>
  ...list with menu options...
</v-menu>

和

<v-tooltip v-slot:activator="{on}">
  <v-btn v-on="on">Menu Trigger with Tooltip</v-btn>
  <span>Tooltip Content</span>
</v-tooltip>

现在我尝试将 v-tooltip 粘贴到 v-menu 中，这里的 {on} 会发生什么?

Now I try to paste v-tooltip inside v-menu, what should happen with {on} here?

推荐答案

我认为您很可能不确定冲突"on 对象通过多个 activator 槽传递给模板，以及如何在目标元素上应用所有事件处理程序.

如果是这种情况，您可以通过将其中一个(或两个)分配给具有不同名称的变量来解决此问题(请参阅:分配给新的变量名)，然后解构和重组"，这基本上将它们重新粘合在一起(或merge，从技术上讲).

I think you're most likely unsure about the "conflicted" on objects passed to the template by multiple activator slots and how to apply all of the event handlers on the target element(s).

If that's the case, you can workaround this by assigning either one (or both) of them to a variable with a different name (see: assigning to new variable names), and then destructure and "restructure", which basically glues them back together (or merge them, technically speaking).

或者，直接使用插槽道具.只需确保正确命名它们，这样它们就不会与组件的数据和/或 props 引入另一个命名冲突.

<v-menu> <template #activator="{ on: onMenu }"> <v-btn v-on="onMenu">Menu Trigger</v-btn> <v-tooltip bottom> <template #activator="{ on: onTooltip }"> <v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn> </template> <span>Tooltip Content</span> </v-tooltip> </template> <!-- ...list with menu options... --> </v-menu>

Or, use the slot props directly. Just make sure to name them properly so they won't introduce another naming conflict with the component's data and/or props.

完整演示:

这篇关于在 vuetify 2.0 中的 v-menu 激活器中使用 v-tooltip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！