时间戳

首页 > 解决方案 > 使用带有外部激活器的 Vuetify 工具提示（v-tooltip）组件（即未包装）

vue.js - 使用带有外部激活器的 Vuetify 工具提示（v-tooltip）组件（即未包装）

问题描述

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

例如我有这个（非工作代码）：

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

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

想法：我希望将按钮与工具提示分开放置，以便运行单元测试。测试时，shallowMount剥去里面的任何东西，<v-tooltip>这样我就无法测试按钮了。问题是我不知道如何在悬停时显示工具提示（就像包装时一样），我不想用@click.

编辑：这里是代码笔

标签： vue.jsvuetify.js

解决方案

如何使用v-hoverUI 组件。把它包裹在你的按钮上。使用 v-model 将布尔变量绑定到 v-hover，称之为 buttonHovering。然后使用 v-model 将一个布尔变量绑定到 v-tooltip，称之为 showToolTip。然后使用观察者根据 buttonHovering 的值来切换 showToolTip 的真假。或者，您可以将 showToolTip 设为始终返回 buttonHovering 值的计算属性。最后，将 v-tooltip 的 disabled 属性绑定到该!buttonHovering属性，以确保仅在将鼠标悬停在按钮上时才显示工具提示，而不是工具提示的激活器。

new Vue({
  el: '#app',
  data () {       
    return {
      buttonHovering: false,
      showToolTip: false
    }
  },
  watch: {
    buttonHovering (newVal) {
      this.showToolTip = newVal
    }
  }
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<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.21/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        <v-hover v-model="buttonHovering">
          <v-btn large>
            Hello
          </v-btn>
        </v-hover>
        <v-spacer></v-spacer>
        <v-tooltip left v-model="showToolTip" :disabled="!buttonHovering">
          <span>Hi from over here!</span>
        </v-tooltip>
      </v-card-title>
    </v-card>
  </v-app>
</div>

推荐阅读