amis 辅助类 Visibility 完全指南：用 visible / invisible 控制元素显示与隐藏
【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis
导读
本文聚焦 amis 前端低代码框架中由 helper 工具类 提供的visible与invisible两个显示/隐藏辅助类，介绍其用法、与display类在布局行为上的本质差异，以及如何结合m:/pc:设备前缀实现手机端与桌面端的差异化显示。读完本文，你将掌握在 amis 页面中通过className一行配置即可精确控制元素显隐的实战能力，并理解其底层 SCSS 生成机制。
一、认识 visible 与 invisible
在 amis 的辅助类体系中，Visibility（显示与隐藏）提供了两个互为对偶的工具类，定义位于 packages/amis-ui/scss/helper/layout/_visibility.md：
| Class | Properties |
|---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
visible：元素正常显示，参与页面布局；invisible：元素被隐藏，但仍然占据原有的布局空间，只是视觉上不可见。
两者的实现来自同一个 SCSS mixin。在 packages/amis-ui/scss/helper/layout/_visibility.scss 中：
@mixin make-visibility($prefix: '.') { #{$prefix}visible { visibility: visible; } #{$prefix}invisible { visibility: hidden; } }mixin 接受一个$prefix参数，默认以.为前缀生成普通类，传入设备前缀时则生成带响应式前缀的类（见下文第四节）。
二、使用方式：一行 className 控制显隐
在 amis 页面中，几乎所有组件都支持通过className属性挂载辅助类。例如隐藏一个文本：
{ "type": "tpl", "className": "invisible", "tpl": "这段文字会被隐藏，但依然占据布局空间" }也可以作用在容器级组件上，隐藏整块区域：
{ "type": "container", "className": "invisible", "body": [ { "type": "tpl", "tpl": "容器内的所有内容都不会被看到" } ] }需要重新显示时，直接移除invisible类，或显式添加visible类覆盖即可。
三、与 display 系的区别：空间是否保留
这是选择显隐方案时最关键的一个决策点：
| 行为 | invisible（visibility） | hidden（display:none） |
|---|---|---|
| 视觉隐藏 | ✅ 隐藏 | ✅ 隐藏 |
| 保留布局空间 | ✅ 保留 | ❌ 完全移除 |
| 是否触发重排 | ❌ 仅重绘 | ✅ 触发重排 |
- 当希望元素消失但布局不抖动（例如占位、过渡动画前的隐藏态）时，优先使用
invisible； - 当希望元素从文档流中彻底移除（后续元素上移补位）时，应使用 amis 的
hidden类（对应display: none）。
在 packages/amis-ui/scss/_utilities.scss 中还可以看到show类同样使用visibility: visible，与visible语义一致，属于历史遗留的同义工具类；而invisible2（packages/amis-ui/scss/_utilities.scss）则与invisible等价，均为visibility: hidden。
需要留意：
invisible只是隐藏元素，其内部的input等可聚焦控件依然存在于文档中，若同时需要阻止交互，应结合disabled属性或交互层面的状态配置使用。
四、响应式设计：m: 与 pc: 设备前缀
visible/invisible支持 amis 的响应式辅助类机制，可通过添加设备前缀分别针对「手机端」或「PC 端」设置样式：
- 无前缀：作用于所有视图模式（移动端 + PC 端）；
m:前缀：仅作用于手机端；pc:前缀：仅作用于桌面端。
例如「只在 PC 端隐藏某块内容」：
{ "type": "tpl", "className": "pc:invisible", "tpl": "这段文字只在 PC 端隐藏，移动端正常显示" }对应「只在手机端显示」：
{ "type": "tpl", "className": "m:visible", "tpl": "这段文字只在手机端显示" }从源码看，响应式变体的生成逻辑位于 _visibility.scss：遍历$devices配置的设备列表，逐个通过media-device混入生成带设备前缀的类：
@include make-visibility(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @include make-visibility('.' + selector-escape($deivce + ':')); } }其中media-device混入（packages/amis-ui/scss/_mixins.scss）根据设备名查表得到对应的媒体查询条件：
@mixin media-device($name, $devices: $devices) { $n: map-get($devices, $name); @media #{$n} { @content; } }这样最终会生成类似.m:visible、.pc:invisible的响应式类，在对应媒体查询区间内生效。更完整的响应式机制说明见 响应式设计文档。
五、状态前缀：不支持
与hover:、active:、focus:、disabled:等状态前缀不同，visible/invisible不支持状态前缀，即不能写出hover:invisible这类用法。
原因在于visibility的隐藏语义通常是一次性、确定性的布局决策，很少与交互状态联动；而状态化的显隐一般由组件自身的disabled、条件渲染等机制承担。如果你确实存在「悬停时隐藏/显示元素」这类需求，可以在 amis 的 GitHub 仓库中提交 issue 反馈。
六、最佳实践小结
- 隐藏但占位→ 用
invisible，布局不抖动； - 彻底移出文档流→ 用
hidden（display:none），后续元素自动补位； - 端侧差异化→ 组合设备前缀：
m:visible/pc:invisible，一条类名搞定响应式显隐； - 交互态显隐→ 走状态前缀（如
hover:）或组件条件渲染，因为 Visibility 类本身不支持状态前缀。
通过合理选用visible/invisible及设备前缀，可以在不改动业务逻辑的前提下，用最少的配置实现跨端、可预期的显隐控制，这正是 amis 辅助类体系的实用价值所在。
【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
