Fix Bug #500: 【门诊医生站】检查申请右侧"检查项目分类"切换时,界面出现明显抖动/闪烁
根因分析: 1. el-collapse accordion 模式下快速切换分类时,连续的折叠/展开动画重叠, Element Plus 在动画过程中重新计算面板高度,导致高度跳变和白屏闪烁 2. 折叠容器缺少 overflow:hidden,动画过渡期间内容溢出造成闪烁 修复方案: 1. 添加 isAnimating 防抖标志,handleCollapseChange 中 300ms 内忽略后续点击 (与 CSS 过渡时长一致),让当前动画完整执行后再响应下一次切换 2. .collapse-scroll 添加 overflow-x:hidden,防止水平方向溢出 3. :deep(.el-collapse-item__wrap) 添加 overflow:hidden 替代 will-change:height, 避免强制 GPU 合成层带来的性能开销 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -522,6 +522,7 @@ const categoryList = ref([]); // 原始分类+项目数据
|
||||
const dictSearchKey = ref('');
|
||||
const activeNames = ref(''); // 当前展开的折叠项
|
||||
const categoryLoadingSet = ref(new Set()); // Bug #500: 正在加载方法的分类集合
|
||||
const isAnimating = ref(false); // Bug #500: 防止快速切换时折叠动画重叠导致抖动
|
||||
|
||||
const allMethods = ref([]);
|
||||
|
||||
@@ -669,8 +670,13 @@ async function handleCategoryExpand(cat) {
|
||||
categoryLoadingSet.value.delete(cat.typeId);
|
||||
}
|
||||
}
|
||||
// Bug #500: 改为非 async 函数,避免 el-collapse 的 @change 等待异步完成导致抖动
|
||||
// Bug #500: 添加防抖逻辑,快速切换时跳过中间状态的动画,避免高度跳变和白屏闪烁
|
||||
function handleCollapseChange(activeName) {
|
||||
if (isAnimating.value) return; // 动画进行中,忽略后续点击
|
||||
|
||||
isAnimating.value = true;
|
||||
setTimeout(() => { isAnimating.value = false; }, 300); // 与 CSS 过渡时长一致
|
||||
|
||||
if (activeName) {
|
||||
const cat = filteredCategoryList.value.find(c => c.typeId == activeName);
|
||||
if (cat && (!cat.methods || cat.methods.length === 0)) {
|
||||
@@ -1307,6 +1313,7 @@ defineExpose({ getList });
|
||||
.collapse-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */
|
||||
}
|
||||
.empty-hint {
|
||||
color: #909399;
|
||||
@@ -1479,10 +1486,10 @@ defineExpose({ getList });
|
||||
padding-bottom: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* Bug #500: 折叠面板展开/收起动画使用 will-change 优化性能 */
|
||||
/* Bug #500: 折叠面板动画容器,添加 overflow:hidden 防止展开时内容溢出导致闪烁 */
|
||||
:deep(.el-collapse-item__wrap) {
|
||||
border: none;
|
||||
will-change: height;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.el-collapse-item) {
|
||||
transition: margin 0.2s ease;
|
||||
|
||||
Reference in New Issue
Block a user