背景

在日常開發中，我們會經常使用 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

<