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

Vedu • 2020-12-07 06:41 • 资源分享 • 阅读 2010

介绍

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="email"
  label="请输入校园邮箱?"
  validation="required|email|ends_with:.edu"
  validation-name="教育邮箱"
  placeholder="user@aaa.edu"
/>

单元素输入

type=”radio”为checkbox或select

type="radio"为checkbox或selecttype="radio"
  label="你认为Vue Formulate怎么样?"
  :options="{
    good: \'It’s good\',
    great: \'It’s great\',
    install: \'I’m installing it now.\'
  }"
/>

开箱即用文件上传

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

type="image"
  label="画廊"
  validation="mime:image/jpeg,image/jpg,image/png"
  help="帮助文字"
  multiple
/>

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

<template>
  <FormulateForm v-model="values">
    <FormulateInput
      type="email"
      name="email"
      label="你的电子邮箱是什么？"
      validation="required|email"
      placeholder="jon@example.com"
    />
    <FormulateInput
      name="flavor"
      type="checkbox"
      label="您喜欢哪种口味的冰淇淋？?"
      validation="required|min:1"
      :options="{ vanilla: \'原味\', chocolate: \'巧克力\', strawberry: \'草莓\', pineapple: \'菠萝\'}"
    />
    <FormulateInput type="submit" />
    <pre>{{ values }}pre>
  FormulateForm>
template>

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

总结

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

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/16985.html

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

介绍

Github

特性

实例代码

总结

相关推荐

发表评论