帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

响应式Vue动态表单组件(vue-dynamic-forms)

帝国模板之家 2021-01-04 网页特效 评论

介绍

一款Vue.js 2和3动态表单组件,可以根据业务对象模型动态创建响应式表单。

使用方法

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
      })
    ]
  }
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言