Vuetify：显示带有条件的工具提示

Question

我是 Vue.js 的新手，我希望在你的帮助下理解作用域插槽......

我想优化我的代码，只有当标签超过 10 个字符（或任何其他条件）时，工具提示才能在悬停时可见。

这有效，但没有优化：

<v-btn>
 <v-tooltip right v-if="slot.label.length > 20">
  <template v-slot:activator="{on}">
   <span class="text-truncate ml-1 mr-1" v-on="on">
    {{slot.label}}
   </span>
  </template>
  <span>{{slot.label}}</span>
 </v-tooltip>
 <span v-else class="text-truncate ml-1 mr-1">
  {{slot.label}}
 </span>
</v-btn>

Answer 1

我认为，实现不重复的理想效果的最简单的方法是使用disabled的道具v-tooltip。

new Vue({
  el: '#app',

  data () {
    return {
      slot: {
        label: 'Label'
      }
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-btn>
      <v-tooltip right :disabled="slot.label.length < 10">
        <template v-slot:activator="{on}">
          <span class="text-truncate ml-1 mr-1" v-on="on">
            Button: {{ slot.label }}
          </span>
        </template>
        <span>Tooltip: {{ slot.label }}</span>
      </v-tooltip>
    </v-btn>
    <v-btn @click="slot.label = 'Label'">Short</v-btn>
    <v-btn @click="slot.label = 'Label label'">Long</v-btn>
  </v-app>
</div>

这种方法的缺点是，即使它被禁用，它仍然会创建工具提示。开销并不大，但如果会有很多工具提示，那么这可能是一个考虑因素。

还有其他各种方法可以解决这个问题，但我想不出任何特别简单的方法。你可以使用一个render函数。这将允许您准确地编写您想要的内容而无需任何重复，但需要以维护render功能为代价。

Answer 2

有时您可能希望在禁用底层元素时显示工具提示。例如：如果一个用户已经使用了他账户中的所有资源，那么我们需要要求用户购买更多的资源。此时插入一个额外的 div，然后在其上添加 v-on。

<v-tooltip bottom :disabled="!noCandies">
   <template v-slot:activator="{ on, attrs }">
     <div v-on="on"> <!-- CREATE A DIV AND ADD V-ON HERE-->
       <v-btn :disabled="noCandies" small class="mt-1" @click="useCandy">
          Use candy
       </v-btn>
     </div>
   </template>
   <span>Buy more candies</span>
</v-tooltip>