1 搜索组件 search.vue
<template>
<div class="search-collapse">
<div
class="form-search"
:style="{ height: isFold ? mixHeight + 'px' : '' }"
>
<div ref="collapseContainerRef">
<slot></slot>
</div>
</div>
<div class="control-search">
<slot name="control"></slot>
<template v-if="isCollapse">
<template v-if="btnStyle === 'default'">
<el-button
size="small"
type="text"
v-if="isFold"
@click="handleToggleCollapse"
>
展开
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-button
size="small"
type="text"
v-else
@click="handleToggleCollapse"
>
收起
<i class="el-icon-arrow-up el-icon--right"></i>
</el-button>
</template>
<template v-if="btnStyle === 'simple'">
<el-link
:underline="false"
type="primary"
size="small"
v-if="isFold"
@click="handleToggleCollapse"
>
<i class="el-icon-arrow-down el-icon--right"></i>
</el-link>
<el-link
:underline="false"
type="primary"
size="small"
v-else
@click="handleToggleCollapse"
>
<i class="el-icon-arrow-up el-icon--right"></i>
</el-link>
</template>
</template>
</div>
</div>
</template>
<script>
export default {
name: "SearchCollapse",
props: {
// 默认自动展开
autoSpread: {
type: Boolean,
default: false,
},
// 最小折叠高度
mixHeight: {
type: Number,
default: 40,
},
// 按钮风格,default-普通风格,simple-极简风格
btnStyle: {
type: String,
default: "default",
validator: (value) => ["default", "simple"].includes(value),
},
},
data() {
return {
// 是否折叠
isFold: true,
// 是否可折叠
isCollapse: false,
};
},
watch: {
autoSpread: {
handler(val) {
this.isFold = !val;
},
immediate: true,
},
},
methods: {
// [折叠|展开]
handleToggleCollapse() {
this.isFold = !this.isFold;
if (
document.getElementsByClassName("head-bottom") &&
document.getElementsByClassName("head-bottom").length > 0 &&
document.getElementsByClassName("global-row") &&
document.getElementsByClassName("global-row").length
) {
this.$nextTick(() => {
const dynicHead =
document.getElementsByClassName("head-bottom")[0].offsetHeight;
const contentRow = document.getElementsByClassName("global-row")[0];
contentRow.style.height = `calc(100vh - ${dynicHead}px - 300px)`;
if (contentRow.offsetHeight <= 400) {
contentRow.style.height = "400px";
}
});
}
},
},
mounted() {
this.$nextTick(() => {
const height = this.$refs.collapseContainerRef.scrollHeight;
// 如果大于两倍高度,则显示折叠按钮,其中最小高度与".fold"保持一致
this.isCollapse = height >= this.mixHeight * 2;
if (
document.getElementsByClassName("head-bottom") &&
document.getElementsByClassName("head-bottom").length > 0 &&
document.getElementsByClassName("global-row") &&
document.getElementsByClassName("global-row").length
) {
this.$nextTick(() => {
const dynicHead =
document.getElementsByClassName("head-bottom")[0].offsetHeight;
const contentRow = document.getElementsByClassName("global-row")[0];
contentRow.style.height = `calc(100vh - ${dynicHead}px - 300px)`;
if (contentRow.offsetHeight <= 400) {
contentRow.style.height = "400px";
}
});
}
});
},
};
</script>
<style lang="less" scope>
.search-collapse {
display: flex;
justify-content: space-between;
align-items: flex-end;
.form-search {
flex: 1;
overflow: hidden;
&.fold {
height: 40px;
}
.el-form-item {
margin-bottom: 8px;
}
.el-input__inner {
padding-right: 0;
}
}
.control-search {
padding: 0 0 8px;
display: flex;
align-items: center;
}
}
</style>
2 重置组件 reset.vue
<template>
<el-button size="small" @click="handleClickReset">
<slot></slot>
</el-button>
</template>
<script>
export default {
props: {
formEl: {
type: Object,
},
clear: {
type: Function,
default: () => () => {},
},
},
methods: {
handleClickReset() {
if (!this.formEl) return;
this.formEl.resetFields();
this.$emit("clear");
},
},
};
</script>
<style></style>
3 页面使用
<SearchCollapse>
<el-form :inline="true" :model="searchData" ref="searchLibrary">
<el-form-item label="测试" prop="projectName">
<el-input
v-model="searchData.ceshi"
placeholder="请输入测试的数据"
></el-input>
</el-form-item>
</el-form>
<template #control>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="onSubmit"
>查询</el-button
>
<PipeResetBtn :formEl="$refs.searchLibrary" @clear="empty"
>重置</PipeResetBtn
>
</template>
</SearchCollapse>
<script>
export default {
data() {
return {
searchData: {
ceshi:null
},
};
},
methods: {
empty() {
this.$refs["searchLibrary"].resetFields();
},
onSubmit() {
},
},
};
</script>