将 Vuetify 工具提示(v-tooltip)组件与外部激活器(即未包装)一起使用 [英] Using Vuetify tooltip (v-tooltip) component with an external activator (i.e. not wrapped)

问题描述

我了解如何使用 Vuetify 的 v-tooltip 以及包装组件的工具提示.但是，我不太确定如何将激活按钮放在外面.

I understand how to use Vuetify's v-tooltip with the tooltip wrapping the component. However, I'm not quite sure how to have the activator button outside.

例如我有这个(非工作代码):

e.g. I have this (non-working code):

<v-tooltip bottom
  :activator="$refs.filterBtn"
>
  Filter displayed items
</v-tooltip>
<v-btn
  ref="filterBtn"
  icon
  @click="isFilter = !isFilter"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

我也尝试使用没有 v-bind: 的 prop activator，结果相同

I also tried using prop activator without the v-bind:, same result

想法:我希望将按钮与工具提示分开放置，以便运行单元测试.测试时，shallowMount 会删除 中的任何内容，因此我无法测试按钮.问题是我不知道如何在悬停时显示工具提示(就像包裹时一样)，我不想想用@click触发它.

Idea: I want the button to be placed separately from tooltip in order to run unit tests. When testing, shallowMount strips anything inside <v-tooltip> so I can't test the button. The problem is I don't know how to make tooltip show up on hover (just like it does when wrapped), I do not want to trigger it with @click.

这里是 codepen

推荐答案

试试这个:

<v-tooltip bottom
  v-model="filterBtnTTip"
>
  Filter displayed items
</v-tooltip>

<v-btn
  icon
  @click="isFilter = !isFilter"
  @mouseover="filterBtnTTip = true"
  @mouseleave="filterBtnTTip = false"
>
  <v-icon>fa-filter</v-icon>
</v-btn>

...
data () {
  return {
    ...
    filterBtnTTip: false
  }
}

这篇关于将 Vuetify 工具提示(v-tooltip)组件与外部激活器(即未包装)一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！