Question

我了解如何在包装组件的工具提示中使用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:，结果相同

想法：我希望按钮与工具提示分开放置，以便运行单元测试。测试时，shallowMount会剥离<v-tooltip>内的所有内容，因此我无法测试该按钮。问题是我不知道如何在悬停时显示工具提示（就像包裹时一样），我不想用@click来触发它。

编辑：这是codepen

Answer 1

如何使用v-hover UI组件。将其环绕在按钮上。使用v-model将布尔变量绑定到v-hover，将其称为buttonHovering。然后使用v-model将布尔变量绑定到v-tooltip，将其称为showToolTip。然后使用watcher根据buttonHovering的值将showToolTip设置为true和false。或者，您可以将showToolTip设置为computed property，该参数始终返回buttonHovering的值。最后，将v-tooltip的disable属性绑定到!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/dist/vuetify.js"></script>


<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        <v-hover v-model="buttonHovering">
          <v-btn slot-scope="{ hover }" large>
            Hello
          </v-btn>
        </v-hover>
        <v-spacer></v-spacer>
        <v-tooltip left v-model="showToolTip" :disabled="!buttonHovering">
          <v-icon slot="activator" color="blue lighten-1" large>info</v-icon>
          <span>Hi from over here!</span>
        </v-tooltip>
      </v-card-title>
    </v-card>
  </v-app>
</div>

Answer 2

尝试一下：

<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）组件与外部激活器配合使用（即未包装）

2 个答案: