Question

如何在vuetify 2.0的v-menu激活器中使用v-tooltip？以前它是使用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菜单中，{on}在这里应该怎么办？

Answer 1

我认为您最不确定由范围on传递给模板的“冲突” slot对象以及如何将所有事件处理程序应用于目标元素）。

在这种情况下，您可以通过将其中一个（或两个）分配给具有不同名称（请参见：Assigning to new variable names）的变量，然后执行以下操作来解决此问题：< / p>

1。破坏和“重组”

从本质上讲，这基本上将它们重新粘合在一起（或者从技术上讲，它们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>

2。或者，使用计算的事件处理程序

<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;
      }, {});
    }
  },
  //...
}

完整演示：

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>

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

1 个答案:

1。破坏和“重组”

2。或者，使用计算的事件处理程序

完整演示：