在 vuetify 模板中合并多个 v-slot:activator 和 v-on

Question

我正在尝试创建可重用的模式窗口，应该通过按下每个 v-data-table 行上的图标来调用该模式窗口。此外，每个图标都应该有鼠标悬停的工具提示。

根据 vuetify 文档，这两个操作都使用相同的结构：v-slot:activator="{ on }" 和 v-on="on"。问题是——在 Vue/Vuetify 中有没有一种方法可以合并这些结构并获得所需的行为？

目前我找到了一种通过添加额外的<a> 标签来获得我想要的东西的方法：

<template>
  <v-data-table :headers="headers" :items="tableItems">
    <template v-slot:item="props">
      <tr>
        <td>{{ props.item.text }}</td>
        <td>
          <some-modal>
            <template v-slot:activator="{ on }">
              <a v-on="on">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-icon v-on="on" small class="mr-2">delete</v-icon>
                  </template>
                  <span>Tooltip message</span>
                </v-tooltip>
              </a>
            </template>
          </some-modal>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

但也许有任何方法可以合并 v-slot:activator 和 v-on 而无需额外的 <a> 标签？

Codesandbox with current behavior

Answer 1

偶然发现解决方案 here，感谢 @Yom T。

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