一个设计不当的表单可能会使用户远离你的网站。幸运的是,对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

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

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

后记

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

Links

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

最新文章

  1. table中的th td margin不生效
  2. GForms 快速入门指南
  3. SHGetSpecialFolderLocation
  4. css的!important规则对性能有影响吗
  5. 安卓handler.post问题
  6. SQL Server索引进阶:第十二级,创建,修改,删除
  7. centos精简系统 源码安装客户端git
  8. WebService应用--使用java开发WebService程序
  9. 解决:wordpress error establishing a database connection problem
  10. vagrant快速搭建LNMP环境并且打包带走留着以后用
  11. 物联网RFID技术之应用ETC系统
  12. Guava 源码分析(Cache 原理 对象引用、事件回调)
  13. P2251 质量检测--洛谷luogu
  14. select2使用方法总结
  15. vue select的change事件,将点击过的城市名存在数组中,下次调用不需要再调用接口
  16. MySQL 5.7.16 字符串拆分 -> 单列变多行记录(转发)
  17. 网络协议之TLS
  18. SSH命令详解2
  19. HUD 1969:Pie(二分)
  20. com.alibaba.fastjson.JSONException: default constructor not found. class ……

热门文章

  1. linux 在 1 MB 之下的 ISA 内存
  2. HeidiSQL工具导出导入MySQL数据
  3. mysql(8.0.16)安装及使用注意事项
  4. Consul etcd ZooKeeper euerka 对比
  5. Java 学习笔记(11)——lambda 表达式
  6. mybatis 整合redis作为二级缓存
  7. Checkpoint R77.30 web ui登录配置
  8. 小白学 Python 爬虫(31):自己构建一个简单的代理池
  9. JS进阶——this绑定了谁?
  10. iscsi,nfs