Javascript Vuetify-v-工具提示对断点没有响应？

我面临一个无法解决的问题，但我不确定这是否是vue/vuetify的错误，或者错误是否在我这边

这就是我试图实现的目标： 仅在sm及以下屏幕尺寸上显示工具提示。这是在加载页面时屏幕大小的响应

当页面以sm屏幕大小加载时，此代码按预期工作，并按预期响应（将屏幕大小放大到md或更高，并将屏幕大小减小到sm）但它没有显示工具提示，并且正在响应，此时页面将以md屏幕大小和更大的屏幕大小加载，并将屏幕大小减小到sm

mdi检查
sm屏幕大小！
md屏幕大小！
导出默认值{
数据（）{
返回{
}
},
}

感谢您的帮助。非常感谢。

---

Meffesino

我不久前遇到了这个问题！由于某些原因，

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>

mdi检查
sm屏幕大小
md屏幕大小！

我不久前遇到了这个问题！由于某些原因，

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>

mdi检查
sm屏幕大小
md屏幕大小！

如果您想在JavaScript中解决这个问题，我建议您查看

v-resize

指令。如果你想在CSS中解决这个问题-那么你需要2个图标（一个有工具提示，一个没有），并且每个图标都应该只在适当的屏幕大小上可见（使用响应CSS类）。v-resize可能是一个解决方法。。。但我认为应该使用一个附加指令（v-resize），该指令与一个附加方法相链接，该方法在调整大小时不断触发。如果没有其他（更干净的）解决方案，我将使用v-resize，具体取决于您对

clear

的定义-媒体查询的CSS方法将需要两个

v-icon

副本，但将避免不断触发事件。如果您想在JavaScript中解决此问题，我建议您查看

v-resize

指令。如果你想在CSS中解决这个问题-那么你需要2个图标（一个有工具提示，一个没有），并且每个图标都应该只在适当的屏幕大小上可见（使用响应CSS类）。v-resize可能是一个解决方法。。。但我认为应该使用一个附加指令（v-resize），该指令与一个附加方法相链接，该方法在调整大小时不断触发。如果没有其他（更干净的）解决方案，我将使用v-resize，具体取决于您对

清除

的定义-使用媒体查询的CSS方法将需要2份

v-icon

，但将避免持续触发事件。