设计不当的表单会使访问者远离你的网站。幸运的是，对Vue开发人员来说，有许许多多的Vue输入表单库可以让表单的制作变得轻而易举。
直观且对用户友好的表单，其好处包括：
-
更高的转化率 -
更好的用户体验 -
更专业的品牌
这篇文章将介绍9个非常实用的Vue输入表单库。
希望你能和我一样喜欢这些工具！
1. Vue Select
官方地址：https://github.com/sagalbot/vue-select
<select>元素是表单的重要组成部分。如果你有制作表单的经验，你就会知道编写<select>元素真的很痛苦。
幸运的是，Jeff Sagal的库Vue Select为我们提供了一种直观的方式来添加多种功能，例如
-
标记 -
搜索 -
过滤 -
Vuex支持
保证易于使用，因为我已经在多个项目中使用过了。
2. Vue Input Tag
官方地址：https://github.com/matiastucci/vue-input-tag
允许网站访问者添加标签是表单所需的常用功能。然而，如果要实施你自己的灵活系统可能很棘手——尤其是对于Vue新手而言。
Vue Input Tag库是一个向表单添加标签的好方法。
3. Vue Dropdowns
官方地址：https://github.com/mikerodham/vue-dropdowns
Vue Dropdowns也是一个处理<select>元素的库。它不仅可以帮助创建流畅的输入，而且还提供了一种设置数据和侦听诸如change和blur之类事件的好方法。
只需简单的设置，就可以使得表单看起来更漂亮，绝对是一个事半功倍的好方法。
4. Vue Color
官方地址：https://github.com/xiaokaike/vue-color
Vue Color是一种将颜色选择添加到表单中的简单方法。从零开始实现其中一个系统需要进行数个小时的规划和工作，但使用Vue Color只需几分钟。
这个库也是高度可自定义的。
它自带若干不同的样式、事件钩子，并支持不同的颜色格式。如果你想为app添加更高级别的可定制性，那么强推Vue Color。
5. VueJS DatePicker
官方地址：https://github.com/charliekassel/vuejs-datepicker
VueJS Date Picker是我见过的最干净的日期选择器库之一。它提供了一个日历视图，允许用户单击以选择日期。
在我看来，这非常专业化和可自定义。事实上，它有几十个易于编辑的prop和事件来完美匹配用例。不过，我感觉默认设置对于大多数项目也很友好。
6. Vue Switches
官方地址：https://github.com/drewjbartlett/vue-switches
切换开关是创建切换选项的绝妙方式——时尚又直观，并且可以进行修改以匹配几乎任何app的风格。
Vue Switches是一个了不起的库，用于创建漂亮的切换开关表单。凭借各种主题以及自定义颜色和文本的能力，Vue Switches将会是你用于表单的灵活解决方案。
7. Vue Dropzone
官方地址：https://rowanwins.github.io/vue-dropzone/docs/dist/#/demo
Vue Dropzone是一个拖放文件上传库。近年来，拖放文件上传变得越来越普遍，这也是让app现代化表现的一种简单方法。
Vue Dropzone提供了数十种自定义的prop和事件，允许你针对特定项目调整其功能。但无论你是否选择修改Vue Dropzone，它都是一个简单而强大的工具。
8. Vue Circle Sliders
官方地址：https://github.com/devstark-com/vue-circle-slider
Vue Circle Sliders是为表单添加一点品味的好方法。与典型的线性滑块输入不同——圆形滑块感觉更自然。
我喜欢这个库，因为它用途广泛。Vue Circle Sliders不但支持触摸控制，允许你设置最大值/最小值，甚至你还可以控制滑块的步长。
9. Vue Phone Number
官方地址：https://github.com/LouisMazel/vue-phone-number-input
在不使用任何库的情况下，收集电话号码可能会有点棘手。你必须考虑格式、国家/地区代码等。
Vue Phone Number库则能处理所有事情，并自带一个漂亮的UI，看起来专业且安全。这两个因素能够提高表单的转换率。
而且它也非常灵活，你可以自定义多个功能，包括
-
有效的国家/地区代码 -
主题和颜色 -
电话号码格式
总的来说，这是一个非常酷的选择，可以为你的Vue应用程序添加更多样式。
总结
虽然这远不是Vue输入表单库的完整列表，但这里列出的这9个库确实可以帮助我们在开发项目时节省大量时间。它们都是通过高级功能增强表单的一些简单方法。
（文本完）
每日分享前端插件干货，欢迎关注！
点赞和在看就是最大的支持❤️
原文始发于微信公众号（前端新世界）：9 个功能强大的 Vue 输入表单库
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/41042.html
