feat(ui): 为可伸缩弹窗新增额外按钮插槽并调整可折叠面板边距
- 在 `StretchableModal` 头部新增名为 `extraButtons` 的插槽,用于放置附加控制组件 - 确保 `StretchableModal` 始终渲染底部插槽(footer slot),移除条件显示逻辑 - 调整 `CollapsiblePanel` 的下边距(margin-bottom),使其仅在非最后一个子元素时生效,从而消除末尾的冗余空间 - 为额外按钮区域添加悬停发光效果样式
This commit is contained in:
parent
50dd4cf76b
commit
66b719695c
@ -160,7 +160,9 @@ function onAfterLeave(el) {
|
|||||||
.collapsible-panel {
|
.collapsible-panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
&:not(:last-child) {
|
||||||
margin-bottom: vh(17);
|
margin-bottom: vh(17);
|
||||||
|
}
|
||||||
border: 2px solid transparent; /* 防止 hover 时抖动 */
|
border: 2px solid transparent; /* 防止 hover 时抖动 */
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
|
|||||||
@ -15,6 +15,9 @@
|
|||||||
<div class="stretchable-modal__header">
|
<div class="stretchable-modal__header">
|
||||||
<slot name="header">
|
<slot name="header">
|
||||||
<h3 class="stretchable-modal__title">{{ title }}</h3>
|
<h3 class="stretchable-modal__title">{{ title }}</h3>
|
||||||
|
<div class="stretchable-modal__extra">
|
||||||
|
<slot name="extraButtons"></slot>
|
||||||
|
</div>
|
||||||
</slot>
|
</slot>
|
||||||
<button
|
<button
|
||||||
v-if="showClose"
|
v-if="showClose"
|
||||||
@ -36,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部:大弹窗bottom切图.png -->
|
<!-- 底部:大弹窗bottom切图.png -->
|
||||||
<div v-if="$slots.footer" class="stretchable-modal__footer">
|
<div class="stretchable-modal__footer">
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -212,6 +215,20 @@ onUnmounted(() => {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__extra {
|
||||||
|
position: absolute;
|
||||||
|
right: 125px;
|
||||||
|
top: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&:hover {
|
||||||
|
// border: 2px solid rgba(255, 80, 80, 0.6);
|
||||||
|
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
|
||||||
|
0 0 35px rgba(255, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__close {
|
&__close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 34px;
|
top: 34px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user