一个 ui 组件可以作为两个项目的激活器吗?(尝试使用带有 v-dialog 的 v-tooltip) [英] Can a ui component be an activator for two items? (Trying to use a v-tooltip with a v-dialog)

问题描述

我有一个按钮，它是我模板中对话框的激活器.但我也想使用带有按钮的工具栏.(换句话说，当我将鼠标悬停在按钮上时，我希望看到 v 工具提示，而当我单击该按钮时，我希望打开对话框.)

I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.)

我尝试使用工具提示上的追加"槽，但没有成功.当我添加 append 插槽时，按钮从呈现的页面中完全消失.

I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page.

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

Is it even possible to use a v-tooltip with a v-dialog in veutify?

这是我所拥有的，但不起作用.

This is what I have that does not work.

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

推荐答案

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

Thanks @Traxo. All I had to do was add the slot="activator"to both components for it to work.

这篇关于一个 ui 组件可以作为两个项目的激活器吗?(尝试使用带有 v-dialog 的 v-tooltip)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！