Vuetify按钮图标小屏消失解决方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《Vuetify 按钮图标在小屏消失解决方法》，聊聊，希望可以帮助到正在努力赚钱的你。

Vueitfy 的 `hidden-sm-and-down` 类会在屏幕宽度 ≤ 960px（即 `sm` 断点及更小）时隐藏元素，导致按钮图标在中等及以下尺寸设备上不可见；应改用 `hidden-xs-only` 或响应式条件渲染来精准控制显示逻辑。

在 Vuetify 中，响应式工具类基于预设断点（xs, sm, md, lg, xl），其中 sm 对应 ≥ 600px，而 sm-and-down 表示 ≤ 960px（注意：Vuetify 2.x 中 sm-and-down 实际覆盖 xs + sm，即 ≤ 960px；Vuetify 3.x 已弃用该写法，统一为 d-none d-sm-flex 等组合）。因此，你代码中使用的 本意是“仅在大屏显示图标”，但实际效果却是：当屏幕宽度 ≤ 960px（包括平板、小屏笔记本甚至部分桌面缩放场景）时，图标被强制隐藏——这正是图片在 960px 以下消失的根本原因。

✅ 正确做法取决于设计目标：

• 若希望仅在超小屏（手机）隐藏图标，而在平板（≥ 600px）及以上始终显示，应使用：

  <span class="hidden-xs-only"> <!-- 仅在 xs（< 600px）隐藏 -->
    <img src="/storage/img/btn-lang/en.png" style="width: 40px" />
  </span>

• 若希望图标始终可见（推荐用于语言切换等关键功能），直接移除隐藏类：

  <img src="/storage/img/btn-lang/en.png" style="width: 40px" />

• 更健壮的方案（Vuetify 2.x）：结合 v-if 与 $vuetify.breakpoint 实现运行时判断：

  <span v-if="$vuetify.breakpoint.mdAndUp">
    <img src="/storage/img/btn-lang/en.png" style="width: 40px" />
  </span>
  <span v-else>EN</span> <!-- 小屏降级为文字 -->

⚠️ 注意事项：

• 避免混淆 hidden-sm-and-down（≤ 960px）与 hidden-md-and-up（≥ 1264px）等命名逻辑；
• Vuetify 3 已废弃所有 hidden-* 类，统一使用 d-none d-[breakpoint]-block（如 d-none d-sm-block）；
• 图标消失问题常伴随布局错位，建议搭配 v-btn 的 icon 属性或 v-icon 组件提升可访问性与一致性。

总结：响应式类不是“直觉命名”，务必查阅 Vuetify 2.x 官方断点文档 或升级至 Vuetify 3 的现代响应式语法，以避免因断点理解偏差引发的 UI 异常。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vuetify按钮图标小屏消失解决方法》文章吧，也可关注golang学习网公众号了解相关技术文章。