当前位置:首页 > 技术分析 > 正文内容

Vue优秀表单组件,用Vue构建表单的最简单方法——Vue Formulate

ruisui881个月前 (03-23)技术分析9

介绍

Vue Formulate是使用Vue构建表单的最简单方法。主要功能包括表单和字段验证,文件上传,表单生成,支持标签的单元素输入,帮助文本,错误消息,占位符等,以及在自己的项目中使用的全面文档。






Github



https://github.com/wearebraid/vue-formulate

特性

  • 开发者幸福

表单无处不在,但对于作者来说却令人厌烦—不再了。Vue Formulate为开发人员提供了强大而灵活的API,使复杂的表单创建变得轻而易举。

  • 单个输入元素

使用Vue Formulate,无需记住十几个组件的名称-所有表单元素都是由单个组件创建的。简单!

  • 内置验证

开箱即用的验证非常简单,可以处理95%的用例。帮助文本,验证规则和验证消息是简单的工具。也可以添加自定义验证。

  • 插件系统

通过插件系统,扩展Vue Formulate的功能或在项目中重复使用自定义输入,验证规则和消息。使您的插件开源,与他人共享!

  • 生成表格

从JSON字符串生成整个表单。由于Vue Formulate使用单个输入组件,因此可以轻松地遍历数组并动态生成表单。

  • 自己的风格

Vue Formulate具有简单的语义类,可轻松完成样式输入。滚动自己的样式或选择我们预先内置的主题之一。

实例代码

  • 表格验证

Vue Formulate包含20条规则并支持定义自己的规则


  • 单元素输入

type="radio"为checkbox或select

type="radio"为checkbox或select


  • 开箱即用文件上传

开箱即用,文件上传效果很好


  • 使用一个对象为整个表单建模


<script>
export default {
  data () { return { values: {} } }
}
</script>


总结

Vue Formulate是一个优秀的Vue表单构建工具,以非常简单的方式构建非常复杂的表单元素,enjoy it!

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2957.html

分享给朋友:

“Vue优秀表单组件,用Vue构建表单的最简单方法——Vue Formulate” 的相关文章

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title","isShow"], // 2、接收的同时对数据类型进行限制 props:{...

2024最新版:前端性能优化方案汇总

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~Hello,大家好,我是 Sunday。前端性能优化一直是很多同学非常关注的问题,在日常的面试中也是经常会被问到的点。所以今天咱们就花一点时间来了解一下2024最新的...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

三、Uni-app + vue3 页面如何跳转及传参?

Vue 项目往往需要使用 vue-router 插件,刚开始入门 Uni-app + Vue3 项目的同学,会不会想着路由使用 vue-router V4 版本不就可以了吗?不怕大家笑话,我就是这样想的,毕竟我是第一次使用 Uni-app ,由于孕期记性贼差,所以我决定写成笔记,加深记忆。uni-a...

Vue实战篇|使用路由管理用户权限(动态路由)

权限控制是后台管理系统比较常见的需求,如果我们需要对某些页面的添加权限控制的话,那我们可以在路由管理中的权限做一些校验,没有通过权限校验的给出相应的提示或者直接跳转到报错页面。跟着我一起来学vue实战篇路由管理权限吧!权限校验函数getCurrentAuthority()函数用于获取当前用户权限,一...