样例展示
- 效果示例-折叠状态
- 效果示例-展开状态
- 代码示例
<custom-search-wrapper><!--showFoldBtn 需要展示折叠按钮时传值--><template slot='left'><el-form:model="searchFormData"inlinesize="small"><el-form-item><el-inputclearablev-model="searchFormData.employeePhone"placeholder="请输入职工电话"/></el-form-item><el-form-item><el-selectv-model="searchFormData.employeeSource"placeholder="请选择职工来源"><el-optionv-for="item in employeeSourceList":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form></template><template slot="right"><div><el-buttontype="primary"@click="handleSearchList"icon="el-icon-search">查询</el-button><el-buttonicon="el-icon-refresh-right"@click="handleResetSearchForm">重置</el-button></div></template>
</custom-search-wrapper>
组件源码
<template><div class="search-wrapper"><!-- 左侧插槽：搜索表单 --><div :class="['search-left', toggleFoldSearchWrapper ? 'fold-height' : '']"><slot name="left" /></div><!-- 右侧扩展：查询、重置以及展开/收起 --><div class="search-right"><slot name="right" /><!-- 展开/收起 --><divv-if="showFoldBtn"class="fold-btn"@click="handleToggleSearch"><span class="fold-text">{{ toggleFoldSearchWrapper ? '展开' : '收起' }}</span><span class="fold-icon"><i :class="toggleFoldSearchWrapper ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></span></div></div></div>
</template>
<script>
export default {name: 'searchWrapper',props: {// 是否展示折叠按钮showFoldBtn: { type: Boolean, default: false }},data () {return {toggleFoldSearchWrapper: true}},methods: {// 展开/收起handleToggleSearch () {this.toggleFoldSearchWrapper = !this.toggleFoldSearchWrapper}}
}
</script>
<style lang="scss" scoped>
.search-wrapper {width: 100%;display: flex;justify-content: space-between;.search-left {flex: 1;&.fold-height {height: 50px; // 项目中使用的表单单行高度overflow: hidden;}}.search-right {display: flex;.fold-btn {display: flex;line-height: 30px;margin-left: 10px;cursor: pointer;.fold-text {width: 70px;font-size: 16px;font-weight: 400;color: #2796d4;}}}
}
</style>
组件说明
此为初版搜索栏组件，与表单并无太大关系，所以我起的组件名字是 searchWrapper——搜索栏容器。起因是有一天UI突然要统一项目样式风格，要求搜索栏区域内容较多时可以折叠/展开。正常来说是没有毛病的，但是对于当时的项目就很有毛病。（火气要上来…）
项目主体是由我主要参与魔改的Vue-Admin(Vue + ElementUI)，项目里通过iframe+auth2.0认证嵌入了几个项目模块：一部分是Vue+View Design，一部分是React+Antd。但是，UI指着一个Antd的示例项目给我看：你就照着这个样子改！！！
大哥，抛开样式风格不一样不说，真要是改了的话，那得动多少页面！！！奈何身为基层打工人，屋里抗拒，只能微笑答应，转身自己心里爆炸。
当然，最终也没有完全按照他的意思改。由于其他项目的紧急插队，暂时就这样子先处理。
后续的项目经历中，根据需求的不断变化，搜索栏组件有了其他的封装类型，甚至与本文完全不同，以后慢慢更新
