Vuetify - v-tooltip не реагирует на точки останова? - PullRequest
Новая
       164

Vuetify - v-tooltip не реагирует на точки останова?

1 голос
/ 07 августа 2020

У меня проблема, которую я не могу решить, но я не уверен, что это ошибка vue / vuetify или ошибка на моей стороне.

Это то, что я попробуйте выполнить sh: Показывать всплывающую подсказку только на экранах sm и ниже. Это ответ, независимо от размера экрана при загрузке страницы.

Этот код работает, как ожидалось, когда страница загружается с размером экрана sm и реагирует, как ожидалось (увеличьте размер экрана до md и выше и уменьшите размер экрана обратно в см). Но он не отображает всплывающую подсказку и реагирует, когда страница будет загружена с размером экрана md и выше и уменьшит размер экрана до sm! 

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="auto" align="center">
        <v-tooltip right :disabled="$vuetify.breakpoint.mdAndUp">
          <template v-slot:activator="{ on }">
            <v-icon color="success" v-on="on">mdi-check</v-icon>
          </template>
          <span>sm screen size!</span>
        </v-tooltip>

        <div class="hidden-sm-and-down">md screen size!</div>
      </v-col>
    </v-row>
  </v-container>
</template>


<script>
  export default {
    data () {
      return {

      }
    },
  }
</script>

Любая помощь приветствуется. Спасибо! Меффезино

1 Ответ

0 голосов
/ 10 августа 2020

Я столкнулся с этой проблемой когда-то go! почему-то v-on="on" не всегда работает с v-icon! но отлично работает, если вы поместите свой v-icon в другой компонент, например v-card! попробуйте это: 

<v-col cols="auto" align="center">
        <v-tooltip right :disabled="$vuetify.breakpoint.mdAndUp">
          <template v-slot:activator="{ on }">

            <v-card flat v-on="on">
              <v-icon color="success">mdi-check</v-icon>
            </v-card>
            
          </template>
          <span>sm screen size</span>
        </v-tooltip>

        <div class="hidden-sm-and-down">md screen size!</div>
      </v-col>
...