背景

在日常开发中，我们会经常使用 element-ui 或者是 antdesign 或者是 element-plus 等组件库实现搜索功能

这里就需要用到相关表单组件

下面就以 element-plus 为例，我们实现一个搜索功能的组件，并且随着屏幕尺寸的变化，其布局也会跟随变化

最终大致效果如下：

这里就没有对布局进行过多的美化，旨在实现其功能

前置知识储备

•  对vue相关知识熟悉

• 熟练使用 element-plus
• 对 v-bind 的使用熟练
• 插槽相关知识
• 组件中如何实现双向绑定，这里可以参考一下我之前写的文章：vue2结合element-ui实现TreeSelect 树选择功能_el-tree选择导入-CSDN博客  在里面介绍了如何实现组件间的 v-model 双向绑定

封装组件

base-ui/form/src/form.vue

<