ui组件可以是两个项目的激活器吗？（尝试将v-tooltip与v-dialog一起使用）

Question

我有一个按钮，它是模板中对话框的激活器。但是我也想通过按钮使用工具提示。（否则，当我将鼠标悬停在按钮上时，我想看到v-tooltip，当我单击按钮时，我想打开对话框。）

我尝试使用工具提示上的“追加”插槽，但未成功。当我添加附加插槽时，按钮从呈现的页面完全消失。

在veutify中甚至可以使用带有v-dialog的v-tooltip？

这就是我所拥有的，行不通。

<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<v-app>
  <v-dialog v-model="showAddPopup" persistent max-width="600px">
    <v-tooltip slot="append" bottom>

      <v-btn slot="activator" absolute fab dark left color="primary" @click="showPopup=true">
        <v-icon dark>add</v-icon>
      </v-btn>

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

    <app-add-new-evaluator-modal @closePopup="closePopup($event)" @submit="addNewEvaluator" />
  </v-dialog>
</v-app>

Answer 1

Vuetify文档说明了如何执行此操作，但是您可以在菜单组件中找到它：https ://vuetifyjs.com/zh-CN/components/menus#menu-with-activator-and-tooltip

这是一个简单的示例，它打开一个带有工具提示按钮的对话框：

<v-dialog>
  <template #activator="{ on: dialog }">
    <v-tooltip>
      <template #activator="{ on: tooltip }">
        <v-btn v-on="{ ...tooltip, ...dialog }">Button</v-btn>
      </template>
      <span>Tooltip text</span>
    </v-tooltip>
  </template>
  <v-card>
    Dialog content
  </v-card>
</v-dialog>

Answer 2

谢谢@Traxo。我所要做的就是将其添加slot="activator"到两个组件中以使其正常工作。