【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程

引入：实现一个带有筛选功能的搜索框，封装成组件；

搜索框长这样子：
在这里插入图片描述
点击右侧筛选图标后弹出层，长这样子：

实际应用中有多组筛选条件，这里为了举栗子就展示一组；

预览：
请添加图片描述

实现思路：

css 样式大致布局；
选中和取消选中的效果、样式切换等；
多选的功能；
多组筛选条件的多选功能；

需要给父组件传递的数据有：

点击搜索按钮时传【输入的内容】；
点击查询按钮时传【选择的查询条件】

进一步的实现：

首先写好基础的静态样式；
当要开始写功能的时候，可以换成接口调用的动态数据，从父组件传入；
先写单选，动态绑定 class 样式来实现选中之后的样式：

:class="{ 'seled-btn': venSeled.includes(index) }"

选中后考虑还需要取消，因为条件筛选是多选的，所以是将下标保存进数组中：

if (this.typeSeled.includes(index)) {// 筛掉【当前选中的】和【数组中】不一致的下标，即只保存相等的this.typeSeled = this.typeSeled.filter(item => item != index)
} else {// 未选中就添加进数组中this.typeSeled.push(index)
}

代码：

<!-- 带条件筛选的搜索框组件--><template><view class="container"><u-popup v-model="show" mode="top" border-radius="14" length="50%"><view class="wrap"><view class="wrap-top"><p>类型：</p><view class="item"><view v-for="(item, index) in typeList" :key="index" @click="seledBtn(index, 'type', item)"class="btn sel-btn" :class="{ 'seled-btn': typeSeled.includes(index) }">{{ item }}</view></view></view></view><view class="wrap-foot" style="display: flex;"><u-button @click="reset">重置</u-button><u-button type="primary" @click="searchRes">查询</u-button></view></u-popup><u-search @custom="searchClick" :show-action="true" v-model="val" placeholder="请输入" shape="square":border="border" :animation="false"></u-search><img class="right-icon" @click="show = true" src="../../../../static/gzt/filter.png" width="18" height="18" alt=""></view>
</template><script>
export default {props: {vehList: {type: Array},workList: {type: Array}},data() {return {typeList: ['类型1', '类型2'],// 是否点击typeSeled: [],val: '',border: true,show: false}},methods: {// 点击搜索searchClick() {this.$emit('singleClick', this.val)},// 选中某一个条件seledBtn(index, type, itemVal) {// console.log('type', type);if (type == 'type') {if (this.typeSeled.includes(index)) {// 筛掉【当前选中的】和【数组中】不一致的下标this.typeSeled = this.typeSeled.filter(item => item != index)} else {// 未选中就添加进数组中this.typeSeled.push(index)}} },// 点击重置reset() {this.typeSeled = []},// 点击查询searchRes() {let typeRes = []// 整理数据// typeList typeSeledthis.typeList.forEach((item, index) => {this.typeSeled.forEach(item1 => {if (index == item1) {typeRes.push(item)}})})// 给父组件发送选择的查询条件this.$emit('filterSearch', typeRes)}}
}
</script>

样式参考：

<style lang="scss">
.wrap {padding: 0 15px 60px 15px;// background-color: pink;.wrap-top {margin-top: 10px;>p {color: #4F4B46;}.item {display: flex;flex-wrap: wrap;margin-top: 10px;}// btn的共有样式.btn {margin-top: 5px;margin-right: 8px;width: 30%;text-align: center;padding: 5px;border-radius: 8px;}// 未被选中的样式.sel-btn {background-color: #F5F7F8;color: #717171;border: 1px solid #F0F0F0;}// 被选中的样式.seled-btn {background-color: #EDF5FF;border: 1px solid #6AA4EC;color: #6AA4EC;}}
}::v-deep .u-btn--default {color: #b7b8b8 !important;border-radius: 0px;
}.wrap-foot {position: fixed;margin-top: 5px;bottom: -1px;width: 100%;
}::v-deep uni-button {width: 100%;
}.container {display: flex;background-color: white;padding: 5px;border-radius: 8px;.right-icon {margin-top: 7px;margin-left: 10px;}
}::v-deep .u-action-active {color: gray;
}::v-deep .u-content {border: 1px solid #ccc !important;
}
</style>