File tree Expand file tree Collapse file tree 3 files changed +58
-11
lines changed Expand file tree Collapse file tree 3 files changed +58
-11
lines changed Original file line number Diff line number Diff line change @@ -1439,6 +1439,27 @@ onMounted(() => {
1439
1439
}
1440
1440
});
1441
1441
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
+
1442
1463
// popoverProps 可以删除,因为已经移到子组件中
1443
1464
1444
1465
// 新增处理变量选择的方法
Original file line number Diff line number Diff line change 34
34
overflow : hidden ; // 确保内容溢出时隐藏
35
35
36
36
.variables {
37
- flex : 1 ;
38
- overflow : hidden ;
37
+ position : relative ;
38
+ flex : 1 1 0 ;
39
+ min-height : 0 ;
40
+ height : calc (100% - 48px ); // 减去搜索框的高度
39
41
40
42
:deep (.el-scrollbar ) {
43
+ position : absolute ;
44
+ top : 0 ;
45
+ left : 0 ;
46
+ right : 0 ;
47
+ bottom : 0 ;
41
48
height : 100% ;
42
49
43
50
.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 ;
45
66
}
46
67
}
47
68
}
76
97
}
77
98
78
99
.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 ;
83
107
84
108
:deep (.el-input ) {
85
109
.el- input__wrapper {
86
110
padding : 0 8px ;
87
111
height : 32px ;
88
112
border-radius : 16px ;
89
- width : 100% ; // 确保输入框占满容器宽度
90
- margin-right : v .$spacing-xs ; // 添加右侧边距确保边框可见
113
+ width : 100% ;
91
114
}
92
115
}
93
116
}
102
125
:deep (.el-scrollbar ) {
103
126
flex : 1 ; // 确保高度占满容器
104
127
min-height : 0 ; // 允许内容区域收缩
128
+ height : 100% ; // 添加这个属性以确保滚动容器始终填充父容器
129
+ display : flex ;
130
+ flex-direction : column ;
105
131
106
132
.el-scrollbar__wrap {
107
133
overflow-x : hidden ;
You can’t perform that action at this time.
0 commit comments