超级会员免费看
本文以element-plus为例，介绍如何在vue3中封装并使用表单组件，实现搜索功能。通过前置知识储备，如vue、element-plus、v-bind和插槽的了解，以及组件双向绑定技巧，创建了一个响应式布局的搜索表单。最终展示了一个简洁的搜索表单组件效果。
背景
在日常开发中，我们会经常使用 element-ui 或者是 antdesign 或者是 element-plus 等组件库实现搜索功能
这里就需要用到相关表单组件
下面就以 element-plus 为例，我们实现一个搜索功能的组件，并且随着屏幕尺寸的变化，其布局也会跟随变化
最终大致效果如下：
这里就没有对布局进行过多的美化，旨在实现其功能
前置知识储备
-
对vue相关知识熟悉
- 熟练使用 element-plus
- 对 v-bind 的使用熟练
- 插槽相关知识
- 组件中如何实现双向绑定，这里可以参考一下我之前写的文章：vue2结合element-ui实现TreeSelect 树选择功能_el-tree选择导入-CSDN博客 在里面介绍了如何实现组件间的 v-mod
订阅专栏 解锁全文
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
