在 vuetify 2.0 中的 v-menu 激活器中使用 v-tooltip

Question

如何在 v-menu 激活器中使用 v-tooltip 和 vuetify 2.0？以前它使用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} 会发生什么？

Answer 1

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

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

<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>

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

<v-menu>
  <template #activator="menu">
    <v-btn v-on="menu.on">Menu Trigger</v-btn>

    <v-tooltip bottom>
      <template #activator="tooltip">
        <v-btn v-on="{ ...menu.on, ...tooltip.on }">Menu Trigger with Tooltip</v-btn>
      </template>

      <span>Tooltip Content</span>
    </v-tooltip>
  </template>

  <!-- ...list with menu options... -->
</v-menu>

完整演示：

new Vue({
  el: '#app',

  data: () => ({
    items: [
      { title: 'Item #1' },
      { title: 'Item #2' },
      { title: 'Item #3' }
    ]
  })
})

<link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>

<div id="app">
  <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>

    <v-list>
      <v-list-tile 
        v-for="(item, index) in items" :key="index"
        @click.prevent>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile>
    </v-list>
  </v-menu>
</div>