a
This commit is contained in:
guochunsi
@@ -1,29 +1,49 @@
|
||||
<template>
|
||||
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
|
||||
<div class="search-form__bar" :class="{ 'search-form__bar--no-title': !filterTitle }">
|
||||
<span v-if="filterTitle" class="search-form__title">
|
||||
<el-icon class="search-form__title-icon"><Search /></el-icon>
|
||||
{{ filterTitle }}
|
||||
</span>
|
||||
<div class="search-form__bar">
|
||||
<div class="search-form-container">
|
||||
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
|
||||
<!-- 筛选 + 展开更多 放在同一表单项内，保证垂直对齐 -->
|
||||
<el-form-item v-if="filterTitle || hasCollapsibleItems" class="search-form__left-group">
|
||||
<div class="search-form__left-inner">
|
||||
<span v-if="filterTitle" class="search-form__title">
|
||||
<el-icon class="search-form__title-icon"><Search /></el-icon>
|
||||
{{ filterTitle }}
|
||||
</span>
|
||||
<el-button
|
||||
v-if="hasCollapsibleItems"
|
||||
link
|
||||
type="primary"
|
||||
class="toggle-btn"
|
||||
@click="toggleExpand"
|
||||
>
|
||||
<el-icon style="margin-right: 4px">
|
||||
<ArrowUp v-if="isExpanded" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
{{ isExpanded ? '收起' : '展开更多' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<slot :visible="true" :expanded="isExpanded"></slot>
|
||||
<div v-show="isExpanded" class="collapsible-content">
|
||||
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
|
||||
<!-- 收起时：查询/重置在首行 -->
|
||||
<div v-show="!isExpanded" class="actions-outside">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
<!-- 折叠区：展开时内部再放一份查询/重置，位置在更多筛选项之后 -->
|
||||
<div v-if="hasCollapsibleItems" class="collapse-grid" :class="{ 'is-expanded': isExpanded }">
|
||||
<div class="collapse-grid-inner">
|
||||
<div class="collapse-grid-cell">
|
||||
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
|
||||
<div v-show="isExpanded" class="actions-inside">
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
|
||||
<slot :visible="false" :expanded="true"></slot>
|
||||
</div>
|
||||
<slot name="actions"></slot>
|
||||
<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
|
||||
<el-button link type="primary" @click="toggleExpand" class="toggle-btn">
|
||||
<el-icon style="margin-right: 4px">
|
||||
<ArrowUp v-if="isExpanded" />
|
||||
<ArrowDown v-else />
|
||||
</el-icon>
|
||||
{{ isExpanded ? '收起' : '展开更多' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,10 +209,24 @@ defineExpose({
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
&--no-title {
|
||||
display: block;
|
||||
.search-form__left-group {
|
||||
:deep(.el-form-item__label) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
margin-right: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.search-form__left-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.search-form__title {
|
||||
@@ -201,13 +235,15 @@ defineExpose({
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
padding-right: 14px;
|
||||
margin-right: 14px;
|
||||
padding-right: 12px;
|
||||
margin-right: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-regular);
|
||||
color: var(--el-text-color-secondary);
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@@ -223,31 +259,59 @@ defineExpose({
|
||||
|
||||
.search-form__title-icon {
|
||||
font-size: 15px;
|
||||
color: var(--el-color-primary);
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.search-form-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
:deep(.el-form--inline) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form__left-inner :deep(.toggle-btn) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item:not(:has(.el-button))) {
|
||||
margin-bottom: 14px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-form--inline) {
|
||||
.collapse-trigger-item {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
/* grid 0fr→1fr 高度过渡，ease-out 收尾不弹跳 */
|
||||
.collapse-grid {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.26s cubic-bezier(0.33, 1, 0.68, 1);
|
||||
contain: layout;
|
||||
&.is-expanded {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
.collapse-grid-inner {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.collapse-grid-cell {
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
opacity: 0;
|
||||
/* 收起时立即隐藏，不出现输入框慢慢消失 */
|
||||
transition: opacity 0s;
|
||||
}
|
||||
.collapse-grid.is-expanded .collapse-grid-cell {
|
||||
opacity: 1;
|
||||
/* 仅展开时淡入 */
|
||||
transition: opacity 0.12s ease-out;
|
||||
}
|
||||
.actions-outside,
|
||||
.actions-inside {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user