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

【问题标题】：Vuetify - v-tooltip not responsive on breakpoints?Vuetify - v-tooltip 对断点没有响应？
【发布时间】：2020-08-07 09:45:06
【问题描述】：

我遇到了一个我无法解决的问题，但我不确定这是否是 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>

感谢任何帮助。谢谢！美菲诺

【问题讨论】：

如果你想在 JavaScript 中解决这个问题，我建议你查看 v-resize 指令。如果您想在 CSS 中解决这个问题 - 那么您将需要 2 个图标（一个带有工具提示，一个没有），并且每个图标都应该仅在适当的屏幕尺寸上可见（使用响应式 CSS 类）。
v-resize 可能是一种解决方法......但我认为一个额外的指令（v-resize），它链接到一个额外的方法，不断触发调整大小应该是要走的路.如果没有其他（更清洁的）解决方案，我将使用 v-resize
取决于您对 clear 的定义 - 带有媒体查询的 CSS 方法将需要 v-icon 的 2 个副本，但会避免持续触发事件。

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：