阅读 324

这个9个Vue.js表单输入库,让你的表单写起来更爽更漂亮

原文链接: mp.weixin.qq.com

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项目中去。

您最喜欢的输入库有哪些?我希望收到您的来信!

参考资料

[1] Vue Select: https://github.com/sagalbot/vue-select[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

感谢您的阅读和关注,看完三件事:

如果对你有帮助,帮忙文章右下角点个在看,如果有什么问题欢迎留言交流,还可以转发,这是对作者最大的帮助。