Vuetify - v-tooltip 对断点没有响应？

Question

我遇到了一个我无法解决的问题，但我不确定这是否是 vue / vuetify 的错误，或者错误是否在我身上。

这是我试图完成的：仅在 sm 屏幕尺寸和更低尺寸上显示工具提示。 这是响应页面加载时屏幕的大小。

此代码按预期工作，当页面将以 sm 屏幕尺寸加载并按预期响应（将屏幕尺寸放大到 md 或更高，并将屏幕尺寸缩小回 sm）。 但它没有显示工具提示并且正在响应，当页面将以 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>

任何帮助表示赞赏。 谢谢！ 梅菲西诺

Answer 1

我前段时间遇到过这个问题！ 出于某种原因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>