网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一款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
})
]
}
});
转载请注明来源:响应式Vue动态表单组件(vue-dynamic-forms)
本文永久链接地址:https://www.moyouyouw.cn/code/1195.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论