Fix Bug #500: 【门诊医生站】检查申请右侧"检查项目分类"切换时,界面出现明显抖动/闪烁

根因分析:
1. el-collapse-item__content 上的 transition: height/max-height 0.3s 与 Element Plus
   内部 accordion 动画冲突,造成"双重动画"效果,表现为切换分类时高度跳变
2. collapse-scroll 的 min-height: 120px 过小,切换内容较少的分类时容器收缩导致布局抖动
3. 分类内"加载中..."提示使用 v-if,出现/消失时引起 collapse content 高度突变

修复策略:
- 移除 el-collapse-item__content 和 el-collapse-item 的自定义 transition 属性,
  让 el-collapse 使用原生动画,消除双重动画
- 增大 collapse-scroll 的 min-height 从 120px 到 350px,确保切换时容器不收缩
- 将加载提示的 v-if 改为 v-show,避免 DOM 插入/移除引起高度跳变

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
荀彧
2026-05-15 00:02:32 +08:00
parent e64370bb67
commit c7368db889

View File

@@ -389,7 +389,8 @@
</el-checkbox>
<span class="item-price">¥{{ item.price }}/{{ item.unit || "" }}</span>
</div>
<div v-if="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
<!-- Bug #500修复: 使用 v-show + 占位符,避免加载提示出现/消失时高度跳变 -->
<div v-show="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
加载中...
</div>
<!-- Bug #428修复: 渲染分类联动加载的检查方法列表 -->
@@ -1804,8 +1805,8 @@ defineExpose({ getList });
.collapse-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */
min-height: 120px; /* Bug #500: 固定最小高度,避免分类切换时 flex 容器高度突变 */
overflow-x: hidden;
min-height: 350px; /* Bug #500: 增大最小高度,确保切换分类时容器高度不会收缩导致抖动 */
}
.empty-hint {
color: #909399;
@@ -2119,18 +2120,18 @@ defineExpose({ getList });
height: auto;
line-height: 1.5;
}
/* Bug #500修复: 折叠内容使用明确属性过渡,避免 transition: all 导致子元素意外动画 */
/* Bug #500修复: 折叠内容不添加额外过渡动画,避免与 el-collapse 内部动画冲突导致双重动画/闪烁 */
:deep(.el-collapse-item__content) {
padding-bottom: 4px;
transition: height 0.3s ease, max-height 0.3s ease;
}
/* Bug #500: 折叠面板动画容器,添加 overflow:hidden 防止展开时内容溢出导致闪烁 */
/* Bug #500: 折叠面板容器不加 border保持简洁 */
:deep(.el-collapse-item__wrap) {
border: none;
overflow: hidden;
}
/* Bug #500: 分类项不加 margin 过渡,避免展开/收起时意外位移 */
:deep(.el-collapse-item) {
transition: margin 0.2s ease;
/* 不使用 transition,依赖 el-collapse 原生动画 */
}
/* Bug #500: 分类加载中提示样式 */
.category-loading-hint {