这个9个Vue.js表单输入库，让你的表单写起来更爽更漂亮
2020年第27期
一个设计糟糕的表单会让访问者离开你的站点。幸运的是，对于Vue开发人员来说，有大量可用的Vue输入库，可以轻松地整理表单。
拥有直观且用户友好的表单有很多好处，包括：
更高的转化率 更好的用户体验 更专业的品牌
与其他主要框架一样，有大量的社区解决方案可用于构建漂亮的Vue.js表单。从简单的文本输入到高级电话号码模板，您的表单有很多选择。
我希望你会发现这些工具和我一样有用！
1. Vue Select
使用 <select> 元素是任何形式的重要组成部分。但是如果您有过这样的经验，您就会知道定制它们是一件非常麻烦的事情。
幸运的是，Vue Select[1]提供了一种直观的方式来添加功能。
它很容易使用，我确实在几个项目中使用过它。
2. Vue Input Tag
允许网站访问者添加自己的标签是表单需要的一项常见功能。然而，实现您自己的灵活系统可能很棘手——尤其是对于Vue新手来说。
Vue Input Tag[2]库是向表单添加强大功能的好方法。
3. Vue Dropdowns
Vue Dropdowns[3]是另一个处理 <select> 元素的库，它不仅提供了流畅的输入，而且还提供了设置数据和监听事件(如 change 和 blur)的好方法。
通过简单的设置，这绝对是一种让表单看起来更漂亮的好方法。
4. Vue Color
Vue Color 是一种将颜色选择添加到表单中的简单方法。从头开始实现这些系统需要几个小时的计划和工作，但是使用 Vue Color 只需要几分钟。
该库也是高度可定制的。
它提供了几种不同的样式、事件钩子和对不同颜色格式的支持。我强烈推荐Vue Color为你的应用程序增加一些新的自定义功能。
5. VueJS Date Picker
VueJS Date Picker[4] 是我见过的最干净的日期选择器库之一。它为您提供了日历视图，允许用户单击以选择日期。
我认为，它的外观非常专业，并且也可以高度自定义。实际上，它具有数十种易于编辑的props和events，可以完美匹配您的用例。但是，我认为默认设置对于大多数项目来说也很好。
看看这张来自Vue DatePicker演示的截图。
6. Vue Switches
开关输入是创建切换选项的一种漂亮方式——它们时髦、直观，可以修改以匹配几乎任何应用程序的风格。
Vue Switches[5]是一个了不起的库，用于创建漂亮的开关输入。凭借各种主题以及自定义颜色和文本的功能，它是您表单的灵活解决方案。
7. Vue Dropzone
Vue Dropzone[6] 是一个拖放文件上传库。在过去的几年中，拖放文件的上传变得越来越普遍，这是使您的应用程序看起来更现代的一种简便方法。
Vue Dropzone提供了数十种自定义props和events，可让您针对特定项目调整其功能。但是，无论您是否选择修改它，它都是一种简单而强大的工具，可以添加到表单中。
8. Vue Circle Sliders
Vue Circle Sliders[7] 是为表单添加一点才华（flair）的好方法。与典型的线性滑条输入不同，圆形滑条会感觉更自然，具体取决于您收集的值。
我喜欢这个库，因为它用途广泛。它支持触摸控制，允许您设置最大值/最小值，甚至可以控制滑块的步长。
总的来说，这是一个非常酷的选择，可以考虑为您的Vue应用程序添加更多样式。
9. Vue Phone Number
不使用任何库的情况下，收集电话号码可能会有些棘手。您不必担心格式，国家/地区代码等。
Vue Phone Number[8] 库可处理所有事情，并提供了一个漂亮的UI，它看起来既专业又安全，这两个因素将提高表单的转化率。
它还非常灵活，您可以自定义多种功能，包括：
验证国家/地区代码 主题和颜色 电话号码格式
总结
虽然这绝不是Vue输入库的完整列表，但我列出的这9个库已帮助我节省了开发项目的大量时间，我认为它们都是增强表单功能的简单方法。
我希望您能发现一些新的工具，可以使用到您的Vue项目中去。
您最喜欢的输入库有哪些？我希望收到您的来信！
参考资料
[2] Vue Input Tag: https://github.com/matiastucci/vue-input-tag
[3] Vue Dropdowns: https://github.com/mikerodham/vue-dropdowns
[4] VueJS Date Picker: https://github.com/charliekassel/vuejs-datepicker
[5] Vue Switches: https://github.com/drewjbartlett/vue-switches
[6] Vue Dropzone: https://rowanwins.github.io/vue-dropzone/docs/dist/#/demo
[7] Vue Circle Sliders: https://github.com/devstark-com/vue-circle-slider
[8] Vue Phone Number: https://github.com/LouisMazel/vue-phone-number-input
感谢您的阅读和关注，看完三件事：
如果对你有帮助，帮忙文章右下角点个在看，如果有什么问题欢迎留言交流，还可以转发，这是对作者最大的帮助。