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

Posted geniuslyzh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了译强化表单的9个Vue输入库相关的知识,希望对你有一定的参考价值。

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

拥有直观而且对用户友好的表单有诸多好处,比如:

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

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

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

希望这些工具对你有帮助。

1、Vue Select

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

  • 标记
  • 搜索
  • 过滤
  • 支持Vuex
    非常易用。
    技术图片

2、Vue Input标签

Vue Input标签库可用在表单输入添加标签。例如:
技术图片

3、Vue Dropdowns

Vue Dropdowns是另外一个处理select标签的库。不仅可以创建流畅的输入,而且提供更好的方式去设置数据以及提供事件监听比如change和blur。
技术图片

4、Vue Color

在表单添加颜色选择器,用Vue Color是最简单的一个方式。如果要重新去计划及实施写出来估计要好几个小时。但是用Vue Color只需要几分钟的时间。

技术图片
它具有几种不同的样式、事件钩子以及支持不同的颜色格式。这个强烈推荐。

5、VueJS DatePicker

一个简洁的日期选择组件。
技术图片

6、Vue Switches

一个精美的按钮切换组件。
技术图片

7、Vue Dropzone

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

8、Vue Circle Slider

一个圆形滑块组件。
技术图片

9、Vue Phone Number

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

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

后记

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

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

以上是关于译强化表单的9个Vue输入库的主要内容,如果未能解决你的问题,请参考以下文章

[译] 在2018年你应该知道的9个关于CSS组件化的JS库

强化学习环境库 Gym 发布首个社区发布版,全面兼容 Python 3.9

9个vue.js库

使用 vue 将输入元素附加到表单字段集

Vue3学习笔记(9.3)

) 孙远帅 译