vue.js - Vuetify : show tooltip with a condition

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 的 Prop .

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功能。