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

【Vue】强化表单的9个Vue输入库的更多相关文章

  1. vue的表单编辑删除，保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  2. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  3. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  4. vue + vuex 表单处理

    使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...

  5. vue b表单

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v- ...

  6. Vue(六) 表单与 v-model

    学习使用 v-model 指令完成表单数据双向绑定 基本用法 表单控件在实际业务较为常见,比如单选,多选.下拉选择.输入框等,用他们可以完成数据的录入.校验.提交等.Vue.js 提供了 v-mode ...

  7. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  8. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  9. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

随机推荐

  1. addEventListener() 方法，事件监听（去哪儿网用到过）

    addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...

  2. N9K 40G接口一分4*10G配置

    Breakout InterfacesCisco NX-OS supports the breakout of high bandwidth 40G interfaces at the module ...

  3. 两种高效的事件处理模式(Proactor和Reactor)

    典型的多线程服务器的线程模型 1. 每个请求创建一个线程,使用阻塞式 I/O 操作 这是最简单的线程模型,1个线程处理1个连接的全部生命周期.该模型的优点在于:这个模型足够简单,它可以实现复杂的业务场 ...

  4. 使用 postman 给 API 写测试

    使用 postman 给 API 写测试 Intro 上次我们简单介绍了 使用 postman 测试 API,这次主要来写一些测试用例以检查请求的响应是否符合我们的预期以及如何使用脚本测试 使用 po ...

  5. java基础 -- 关键字final的用法

    用法一(修饰变量): Final变量能被显式地初始化并且只能初始化一次.被声明为final的对象的引用不能指向不同的对象.但是final对象里的数据可以被改变.也就是说final对象的引用不能改变,但 ...

  6. jquery中报错Uncaught ReferenceError: $ is not defined的解决办法

    jquery中报错提示为:Uncaught ReferenceError: $ is not defined 这个错误的原因就是你没有引入jquery库文件或者引入的路径不对造成的

  7. 002 ceph的deploy部署

    介绍:前期对ceph有一个简单的介绍,但是内容太大,并不具体,接下来使用ceph-deploy部署一个Ceph集群,并做一些运维管理工作,深入的理解Ceph原理及工作工程! 一.环境准备 本次使用的虚 ...

  8. 日期格式化跨年bug，是否与你不期而遇？

    2020年来临之前,日期格式化操作也为程序员准备了一个跨年级别的bug,不知你的系统是否遇到? 临近2020年元旦的几天,不少网站出现了类似2020/12/29,2020/12/30,2020/12/ ...

  9. 【题解】BZOJ1034 [ZJOI2008]泡泡堂BNB(贪心)

    [题解]BZOJ1034 [ZJOI2008]泡泡堂BNB(贪心) 考虑直接模拟田忌赛马... 我的最小比你的大,直接上 我的最大比你的大,直接上 otherwise,我小换你大 考虑最劣,由于每次比 ...

  10. 27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽

    openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽 from openpyxl import Workbook,load_workbook from openpyxl.dra ...