【译】强化表单的9个Vue输入库

一个设计不当的表单可能会使用户远离你的网站。幸运的是，对Vue开发者，有大量可用的Vue输入库让你轻松整理表单。

拥有直观并且对用户友好的表单有诸多好处，好比：

• 更高的转化率
• 更好的用户体验
• 更专业的品牌效果

就像其余主要的框架同样，有大量的社区解决方案可用于构建优雅的Vue表单。从简单的文本输入到高级的电话数字模版，都有不少可供选择。

这里是一些我经常使用到的Vue输入库。不过，这只是关于表单元素的一个清单，我也整理了一个Vue图标库的清单。

但愿这些工具对你有帮助。

一、Vue Select

select标签是表单常常用到的一个表单控件。若是你有使用过，应该知道自定义这个select标签是很麻烦的。
幸运的是，Vue Select库提供一种直观的方式去添加这些功能，例如：

• 标记
• 搜索
• 过滤
• 支持Vuex
  很是易用。
  

二、Vue Input标签

Vue Input标签库可用在表单输入添加标签。例如：

三、Vue Dropdowns

Vue Dropdowns是另一个处理select标签的库。不只能够建立流畅的输入，并且提供更好的方式去设置数据以及提供事件监听好比change和blur。

四、Vue Color

在表单添加颜色选择器，用Vue Color是最简单的一个方式。若是要从新去计划及实施写出来估计要好几个小时。可是用Vue Color只须要几分钟的时间。

它具备几种不一样的样式、事件钩子以及支持不一样的颜色格式。这个强烈推荐。

五、VueJS DatePicker

一个简洁的日期选择组件。

六、Vue Switches

一个精美的按钮切换组件。

七、Vue Dropzone

Vue Dropzone 是一个拖放文件上传的组件。简单、强大。

八、Vue Circle Slider

一个圆形滑块组件。

九、Vue Phone Number

一个电话号码输入组件，灵活且可定制化，包括：

• 验证国家代码
• 主题和颜色
• 电话号码格式
  

后记

以上译文仅用于学习交流，水平有限，不免有错误之处，敬请指正。

Links

原文连接
8 Free Vue Icon Libraries to Pretty Up Your Web App