在 Vue 项目开发中，构建一个灵活且易用的搜索组件是非常常见的需求。本文将剖析https://gitcode.com/Jiaberrr/vue3-pc-template项目中基于element-plus二次封装的搜索组件的代码，探讨其设计思路、功能实现以及使用方法，希望在后面的项目中可以复用。
一、组件结构剖析
（一）模板（template）部分
1、整体布局
<template><div class="flex flex-wrap"><!-- 其他元素 --></div></template>- 组件的模板使用了 flex 布局，通过 flex flex-wrap 类让内部元素能够自适应换行。这使得搜索组件在不同屏幕宽度下都能保持良好的显示效果。
2、搜索项循环
<divclass="flex align-center mb-10"v-for="(item, index) in searchConfig":key="index"><!-- 搜索项内容 --></div>- 利用 v-for 指令遍历 searchConfig 数组，为每个配置项生成对应的搜索输入框或选择器等。这里的 searchConfig 显然是一个外部传入的配置数组，用于动态构建搜索界面。
3、不同类型搜索项
<my-inputv-if="item.type == 'input'"class="mr-10 w-200":style="item.style":value="item.defaultValue":placeholder="item.placeholder"clearable@change="(e) => changeValue(e, item.id, item.automaticQuery)"></my-input><MySelectv-if="item.type == 'select'"class="mr-10 w-200":value="item.defaultValue":placeholder="item.placeholder":options="item.options":label-key="item.label":value-key="item.value"@change="(e) => changeValue(e, item.id, item.automaticQuery)"></MySelect><MyTreev-if="item.type == 'tree'"class="mr-10 w-200":data="item.data":defaultProps="item.defaultProps":placeholder="item.placeholder":node-key="item.id"@node-click="(e) => changeValue(e[item.id], item.id, item.automaticQuery)"></MyTree><MyDateTimePickerv-if="item.type == 'datetime' || item.type == 'datetimerange'"class="mr-10 w-200":type="item.type":placeholder="item.placeholder":start-placeholder="item.startPlaceholder":end-placeholder="item.endPlaceholder"@change="(e) => changeValue(e, item.id, item.automaticQuery)"></MyDateTimePicker>- 输入框（MyInput）：当 item.type == 'input' 时，渲染一个自定义的输入框组件 MyInput，并绑定相关属性，如样式 :style="item.style"、默认值 :value="item.defaultValue"、占位符 :placeholder="item.placeholder"，同时监听 change 事件，将值变化传递给父组件处理。
- 下拉选择框（MySelect）：类似地，当 item.type == 'select'，渲染 MySelect 组件，配置选项 :options="item.options"、标签键 :label-key="item.label"、值键 :value-key="item.value" 等，同样在 change 事件处理值更新。
- 树形选择器（MyTree）：对于 item.type == 'tree'，引入 MyTree 组件，传递数据 :data="item.data"、默认属性 :defaultProps="item.defaultProps" 等，通过 @node-click 事件处理节点点击后的取值操作。
- 日期时间选择器（MyDateTimePicker）：当 item.type 为 'datetime' 或 'datetimerange'，使用 MyDateTimePicker 组件，根据类型设置不同属性，如 :type="item.type"、起始占位符 :start-placeholder="item.startPlaceholder" 等，通过 @change 事件同步值变化。
4、查询按钮
<el-buttonv-if="showQueryButton"type="primary"plainicon="Search"@click="queryData">{{ queryButtonText }}</el-button>- 有条件地渲染查询按钮，当 showQueryButton 为 true 时，显示一个 el-button，类型为 primary 且样式为 plain，带有搜索图标，点击时触发 queryData 方法。按钮文本可通过外部传入的 queryButtonText 属性自定义，默认值为 “查询”。
5、插槽（slot）
<slot></slot>- 组件还预留了一个插槽 slot，这使得使用者可以在搜索组件内部灵活插入自定义内容，增强了组件的扩展性。
（二）脚本（script）部分
1、组件引入
import MyInput from "../MyInput/index.vue";import MySelect from "../MySelect/index.vue";import MyTree from "../MyTree/index.vue"import MyDateTimePicker from "../MyDateTimePicker/index.vue"- 首先引入了多个自定义组件，如 MyInput、MySelect、MyTree、MyDateTimePicker，这些组件应该是在项目其他地方定义好的，用于构建搜索界面的各个部分。
2、响应式数据与属性定义
const prop = defineProps({searchConfig: {Type: Array,required: true,},showQueryButton: {Type: Boolean,default: true,},queryButtonText: {Type: String,default: "查询",},});- 使用 ref 函数创建响应式数据（虽然这里未展示具体使用场景，但为后续扩展提供可能），并通过 defineProps 定义组件接收的外部属性。
- searchConfig：是一个必填的数组类型属性，用于配置搜索项的各种信息，如类型、默认值、占位符等，是组件动态构建的关键。
- showQueryButton：布尔类型，默认值为 true，控制查询按钮的显示与否。
- queryButtonText：字符串类型，默认值为 “查询”，用于自定义查询按钮的文本。
3、事件发射
const emit = defineEmits(["updateQueryData"]);- 通过 defineEmits 定义了一个名为 updateQueryData 的自定义事件，用于向父组件传递搜索参数和查询触发标识。
4、值变化处理函数（changeValue）
const changeValue = (value, id, automaticQuery) => {let params = {[id]: value,};emit("updateQueryData", params, automaticQuery);};- 当搜索项的值发生变化时，该函数被触发。它接收新值 value、对应的 id（用于标识搜索项）以及 automaticQuery（是否立即触发查询接口）作为参数。构建一个包含当前搜索项 id 和新值的对象 params，并通过 emit 发射 updateQueryData 事件，将参数传递给父组件。
5、查询函数（queryData）
const queryData = () => {emit("updateQueryData", {}, true);};- 点击查询按钮时执行该函数，它发射 updateQueryData 事件，并传递一个空对象 {} 作为参数，表示无额外筛选条件，同时将 automaticQuery 设置为 true，通知父组件立即执行查询操作。
（三）样式（style）部分
- 这里定义了一个简单的类样式 w-200，将宽度设置为 200px，用于部分搜索组件的宽度统一，增强界面的一致性。
.w-200 {width: 200px;}二、组件使用方法
在其他 Vue 组件中使用这个搜索组件时，示例如下：
1、引入组件
import MySearchComponent from './MySearchComponent.vue'; // 假设组件名为 MySearchComponent，路径根据实际情况调整2、模板中使用
<template><div><MySearchComponent:searchConfig="searchConfigData":showQueryButton="true":queryButtonText="自定义查询按钮文本"><!-- 这里可以插入自定义内容到插槽 --></MySearchComponent></div></template>其中 searchConfigData 是一个符合组件要求的配置数组，例如：
const searchConfigData = [{type: 'input',title: '关键词',placeholder: '请输入关键词',defaultValue: '',id: 'keyword',automaticQuery: true},{type: 'select',title: '分类',placeholder: '请选择分类',defaultValue: '',options: [{ label: '分类 1', value: 'category1' },{ label: '分类 2', value: 'category2' }],id: 'category',automaticQuery: false},// 其他搜索项配置...];三、组件完整代码
其中my-select、my-input等子组件是基于element-plus简单封装的，代码就不贴出来了，如果有需要的话，大家去源项目的src/components文件夹里面找一下
<template><div class="flex flex-wrap"><divclass="flex align-center mb-10"v-for="(item, index) in searchConfig":key="index"><div v-if="item.title">{{ item.title }}：</div><my-inputv-if="item.type == 'input'"class="mr-10 w-200":style="item.style":value="item.defaultValue":placeholder="item.placeholder"clearable@change="(e) => changeValue(e, item.id, item.automaticQuery)"></my-input><MySelectv-if="item.type == 'select'"class="mr-10 w-200":value="item.defaultValue":placeholder="item.placeholder":options="item.options":label-key="item.label":value-key="item.value"@change="(e) => changeValue(e, item.id, item.automaticQuery)"></MySelect><MyTreev-if="item.type == 'tree'"class="mr-10 w-200":data="item.data":defaultProps="item.defaultProps":placeholder="item.placeholder":node-key="item.id"@node-click="(e) => changeValue(e[item.id], item.id, item.automaticQuery)"></MyTree><MyDateTimePickerv-if="item.type == 'datetime' || item.type == 'datetimerange'"class="mr-10 w-200":type="item.type":placeholder="item.placeholder":start-placeholder="item.startPlaceholder":end-placeholder="item.endPlaceholder"@change="(e) => changeValue(e, item.id, item.automaticQuery)"></MyDateTimePicker></div><el-buttonv-if="showQueryButton"type="primary"plainicon="Search"@click="queryData">{{ queryButtonText }}</el-button><slot></slot></div>
</template><script setup>
import MyInput from "../MyInput/index.vue";
import MySelect from "../MySelect/index.vue";
import MyTree from "../MyTree/index.vue"
import MyDateTimePicker from "../MyDateTimePicker/index.vue"
import { ref } from "vue";const prop = defineProps({searchConfig: {Type: Array,required: true,},showQueryButton: {Type: Boolean,default: true,},queryButtonText: {Type: String,default: "查询",},
});
const emit = defineEmits(["updateQueryData"]);// 搜索值变化
// value 新值
// id 对应的key
// automaticQuery 是否立即触发查询接口
const changeValue = (value, id, automaticQuery) => {let params = {[id]: value,};emit("updateQueryData", params, automaticQuery);
};// 查询
const queryData = () => {emit("updateQueryData", {}, true);
};
</script><style scoped>
.w-200 {width: 200px;
}
</style>通过这种方式，就可以轻松地将搜索组件集成到 Vue 项目中，根据不同需求灵活配置搜索项，实现强大且易用的搜索功能。希望本文对大家理解和运用 Vue 组件开发有所帮助，如有疑问，欢迎交流探讨。
