验证：显示带有条件的工具提示

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的{​​{1}}道具。

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函数。

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>