如何修复 vuetify 中按钮图标在小屏幕（

在你的代码中，问题根源明确指向 hidden-sm-and-down 这个工具类。根据 Vuetify 官方断点文档：

• sm 断点对应 ≥ 600px（非 960px）；
• hidden-sm-and-down 表示：在 sm 及更小尺寸（即 ≤ 599.98px）时隐藏元素；
• 而你观察到“图像在 <960px 时消失”，说明实际触发隐藏的断点远早于预期——这恰恰印证了 hidden-sm-and-down 在中等屏（如平板横屏 768px、甚至部分大屏手机）下已生效，造成误隐藏。

✅ 正确做法是：按真实设计意图选择响应式类。若希望图标仅在 移动设备（≤ 767px） 隐藏，或 仅在超小屏（≤ 599px）隐藏，需精准匹配断点：

✅ 推荐修复方案（二选一）

方案 1：图标始终显示（最简稳妥）

<v-btn-toggle borderless>
  <v-btn value="left">
    <img src="/storage/img/btn-lang/en.png" width="40" alt="English" />
  </v-btn>
  <v-btn value="center">
    <img src="/storage/img/btn-lang/pt.png" width="40" alt="Português" />
  </v-btn>
  <v-btn value="right">
    <img src="/storage/img/btn-lang/es.png" width="40" alt="Español" />
  </v-btn>
</v-btn-toggle>

✅ 优势：无条件显示，语义清晰，无障碍友好（补充 alt 属性）。适用于图标本身足够紧凑、无需为小屏让出空间的场景。

方案 2：按需响应式隐藏（推荐进阶控制）

若仍需文字+图标混合布局（例如大屏显示图标+文字，小屏仅留文字），请使用现代 Vuetify 3 的 d-* 工具类（Vuetify 2 用户可使用 d-none d-sm-flex 等）：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

<v-btn-toggle borderless>
  <v-btn value="left">
    <v-icon v-if="$vuetify.breakpoint.smAndUp" size="small" class="mr-1">mdi-translate</v-icon>
    <span class="d-none d-sm-inline">EN</span>
  </v-btn>
  <v-btn value="center">
    <v-icon v-if="$vuetify.breakpoint.smAndUp" size="small" class="mr-1">mdi-translate</v-icon>
    <span class="d-none d-sm-inline">PT</span>
  </v-btn>
  <v-btn value="right">
    <v-icon v-if="$vuetify.breakpoint.smAndUp" size="small" class="mr-1">mdi-translate</v-icon>
    <span class="d-none d-sm-inline">ES</span>
  </v-btn>
</v-btn-toggle>

? 提示：$vuetify.breakpoint.smAndUp 是 Vue 实例内响应式计算属性，实时反映当前断点状态，比静态类更灵活可靠。

立即学习“前端免费学习笔记（深入）”；

⚠️ 注意事项

• 避免滥用 hidden-* 类组合，易引发逻辑冲突；
• 图标路径 /storage/img/... 需确保在所有设备上可访问（检查 Nginx/Apache 静态资源配置）；
• 建议为所有 <img> 添加 alt 属性，提升可访问性与 SEO；
• 若使用 Vuetify 2，请确认版本 ≥ 2.3（旧版 hidden-* 类行为略有差异）。

通过精准理解 Vuetify 断点机制并选用语义明确的响应式策略，即可彻底解决按钮图标在中小屏幕意外消失的问题。