Vue中动态创建反应形式 - vue-dynamic-forms

Vue中动态创建反应形式 - vue-dynamic-forms
插件名称 vue-dynamic-forms
版本号 v3.14.0
发布时间 2020年11月17日
插件作者 asigloo

另一个Vue.js 2和3组件提供了一种轻松的方法,可以基于变化的业务对象模型动态创建响应式表单。

安装和下载:

# Vue 2.x
$ npm i @asigloo/vue-dynamic-forms --save

# Vue 3.x
$ npm i @asigloo/vue-dynamic-forms@next --save

变更日志:

v3.14.0(02/06/2021)

  • 演示:添加了指向页眉和重新设计首页卡片的链接
  • e2e:提交演示后添加了重置测试
  • 选项:提交标志后重置

v3.13.4(01/20/2021)

  • Bug修复

v3.13.2(20年1月11日)

  • Bug修复

v3.13.0(01/10/2021)

  • Bug修复
  • 形式:添加CustomStyles属性以形成形式和输入

如何使用它:

1.导入组件。

// Vue 2.x
import Vue from 'vue';
import VueDynamicForms from '@asigloo/vue-dynamic-forms';

// Vue 3.x
import { createApp } from 'vue';
import { createDynamicForms } from '@asigloo/vue-dynamic-forms';

2.注册组件。

// Vue 2.x
Vue.use(VueDynamicForms);

// Vue 3.x
const VueDynamicForms = createDynamicForms({});
export const app = createApp(App);
app.use(VueDynamicForms);

3.在Vue中创建动态表单。

<template>
  <div id="app">
    <div class="container">
      <h1 class="title text-center">Dynamic Forms Example</h1>
      <div class="row mt-5">
        <div class="col-6">
          <dynamic-form :id="testForm.id" :fields="testForm.fields" @change="valuesChanged"/>
          <div class="row d-flex justify-content-end p-4">
            <button submit="true" :form="testForm.id" class="btn btn-primary">Submit</button>
          </div>
        </div>
        <div class="col-6">
          <pre>{{ formData }}</pre>
          <pre>{{ testForm }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  FormField,
  FormValidation,
  required,
  email,
  pattern
} from "@asigloo/vue-dynamic-forms";
const data = () => ({
  formData: {},
  testForm: {
    id: "test-form",
    fields: [
      new FormField({
        type: "text",
        label: "Name",
        name: "name"
      }),
      new FormField({
        type: "email",
        label: "Email",
        name: "email",
        validations: [
          new FormValidation(required, "This field is required"),
          new FormValidation(email, "Format of email is incorrect")
        ]
      }),
      new FormField({
        type: "password",
        label: "Password",
        name: "password",
        validations: [
          new FormValidation(required, "This field is required"),
          new FormValidation(
            pattern(
              "^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[#$^+=!*()@%&]).{8,10}$"
            ),
            "Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10"
          )
        ],
        value: "sdsdsd"
      }),
      new FormField({
        type: "textarea",
        label: "Bio",
        name: "bio",
        cols: 30,
        rows: 5
      }),
      new FormField({
        type: "select",
        label: "Category",
        name: "category",
        options: [
          { value: null, text: "Please select an option" },
          { value: "arduino", text: "Arduino" },
          { value: "transistors", text: "Transistors" }
        ]
      }),
      new FormField({
        type: "checkbox",
        label: "Read the conditions",
        name: "conditions",
        inline: false
      }),
      new FormField({
        type: "radio",
        label: "Prefered Animal",
        name: "animal",
        inline: true,
        options: [
          { text: "Dogs", value: "dogs" },
          { text: "Cats", value: "cats" },
          { text: "Others", value: "others" }
        ]
      }),
      new FormField({
        type: "number",
        label: "Number",
        name: "number",
        value: 0
      })
    ]
  }
});