Skip to content

Commit b776897

Browse files
committed
更新版本号至 1.1.0;在 ExpressionEditor.vue 中添加布局切换监听,强制更新滚动条;在 layout.scss 中优化变量区域样式,确保滚动容器填充父容器并处理溢出。
1 parent c24da24 commit b776897

File tree

3 files changed

+58
-11
lines changed

3 files changed

+58
-11
lines changed

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/ExpressionEditor.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1439,6 +1439,27 @@ onMounted(() => {
14391439
}
14401440
});
14411441
1442+
// 监听布局切换
1443+
watch(horizontalLayout, () => {
1444+
nextTick(() => {
1445+
// 强制触发滚动容器重新计算
1446+
const scrollbar = document.querySelector('.variables-section .el-scrollbar');
1447+
if (scrollbar) {
1448+
// 触发两次resize事件,确保组件完全重新计算
1449+
window.dispatchEvent(new Event('resize'));
1450+
setTimeout(() => {
1451+
window.dispatchEvent(new Event('resize'));
1452+
}, 300); // 延迟300ms再次触发,确保动画完成后重新计算
1453+
1454+
// 强制重新计算 el-scrollbar
1455+
const scrollbarInstance = (scrollbar as any).__vueParentComponent?.ctx;
1456+
if (scrollbarInstance?.update) {
1457+
scrollbarInstance.update();
1458+
}
1459+
}
1460+
});
1461+
});
1462+
14421463
// popoverProps 可以删除,因为已经移到子组件中
14431464
14441465
// 新增处理变量选择的方法

src/components/styles/layout.scss

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,35 @@
3434
overflow: hidden; // 确保内容溢出时隐藏
3535

3636
.variables {
37-
flex: 1;
38-
overflow: hidden;
37+
position: relative;
38+
flex: 1 1 0;
39+
min-height: 0;
40+
height: calc(100% - 48px); // 减去搜索框的高度
3941

4042
:deep(.el-scrollbar) {
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
right: 0;
47+
bottom: 0;
4148
height: 100%;
4249

4350
.el-scrollbar__wrap {
44-
height: 100%;
51+
position: absolute;
52+
top: 0;
53+
left: 0;
54+
right: 0;
55+
bottom: 0;
56+
overflow-x: hidden;
57+
}
58+
59+
.el-scrollbar__view {
60+
position: relative;
61+
min-height: 100%;
62+
padding: v.$spacing-md;
63+
display: flex;
64+
flex-direction: column;
65+
gap: v.$spacing-xs;
4566
}
4667
}
4768
}
@@ -76,18 +97,20 @@
7697
}
7798

7899
.variables-search {
79-
flex-shrink: 0; // 防止搜索框被压缩
80-
padding: 0 v.$spacing-xs; // 减小padding以确保不会导致溢出
81-
margin-bottom: v.$spacing-xs;
82-
width: 100%; // 确保宽度为100%
100+
flex: 0 0 auto; // 防止搜索框被压缩或拉伸
101+
height: 48px; // 固定高度
102+
padding: v.$spacing-xs v.$spacing-md;
103+
margin-bottom: 0;
104+
width: 100%;
105+
display: flex;
106+
align-items: center;
83107

84108
:deep(.el-input) {
85109
.el-input__wrapper {
86110
padding: 0 8px;
87111
height: 32px;
88112
border-radius: 16px;
89-
width: 100%; // 确保输入框占满容器宽度
90-
margin-right: v.$spacing-xs; // 添加右侧边距确保边框可见
113+
width: 100%;
91114
}
92115
}
93116
}
@@ -102,6 +125,9 @@
102125
:deep(.el-scrollbar) {
103126
flex: 1; // 确保高度占满容器
104127
min-height: 0; // 允许内容区域收缩
128+
height: 100%; // 添加这个属性以确保滚动容器始终填充父容器
129+
display: flex;
130+
flex-direction: column;
105131

106132
.el-scrollbar__wrap {
107133
overflow-x: hidden;

0 commit comments

Comments
 (0)