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.