Using v-tooltip inside v-menu activator in vuetify 2.0

问题

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

That's what I'm trying to combine:

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

and

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

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

回答1:

I think you're most likely unsure about the "conflicted" on objects passed to the template by the scoped 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:

1. Destructure and "restructure"

This basically glues them back together (or merge them, technically speaking).

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

2. Or, use computed event handlers

<v-menu>
  <template #activator="{ on }">
    <v-btn v-on="onMenu">Menu Trigger</v-btn>

    <v-tooltip bottom>
      <template #activator="{ on: onTooltip }">
        <v-btn v-on="getHandlers(on, onTooltip)">Menu Trigger with Tooltip</v-btn>
      </template>

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

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

{
  methods: {
    getHandlers() {
      return [...arguments].reduce((seed, item) => {
        const mergedHandlers = { ...item, ...seed };

        return mergedHandlers;
      }, {});
    }
  },
  //...
}

Complete Demo:

new Vue({
  el: '#app',

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

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

来源：https://stackoverflow.com/questions/58075400/using-v-tooltip-inside-v-menu-activator-in-vuetify-2-0

标签

Vue.js

vuetify.js