龙空技术网

一个基于Vue模型的表单生成器

老鱼的储物柜 70

前言:

眼前大家对“表单生成器php”大约比较重视,你们都想要学习一些“表单生成器php”的相关资讯。那么小编在网摘上汇集了一些有关“表单生成器php””的相关知识,希望咱们能喜欢,小伙伴们快快来学习一下吧!

哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!

IDEA 全称IntelliJ IDEA,是用于java语言开发的集成环境(也可用于其他语言),IntelliJ在业界被公认为最好的java开发工具之一。

激活码开源项目地址:

Vuetify Form Base是一个基于模型的表单生成器,目的是提供一个工具,以便以较少的努力从任何模型数据生成可编辑的表单,即使模型是一个深度嵌套的对象。

Vuetify Form Base作为Vue组件工作,可以很容易地集成到任何VUE项目中。

安装

Npm

npm i vuetify-form-base

Yarn

yarn add vuetify-form-base
使用

首先要在src/plugins/vuetify.js中引入所有必要的组件和指令。

import Vue from 'vue';import Vuetify, {    VRow,    VCol,    VTextField,    VTooltip,    VCheckbox,    VSelect,} from 'vuetify/lib';import { Ripple, Intersect, Touch, Resize } from 'vuetify/lib/directives';Vue.use(Vuetify, {    components: { VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect },    directives: { Ripple, Intersect, Touch, Resize },});export default new Vuetify({    icons: {        iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'    }});

通过v-form-base组件使用:

<v-form-base :model="myModel" :schema="mySchema" @input="handleInput" />

Model 及 Schema

Model: {    name: 'base',    details: {        one: ['a','b','c'],        two: {             a:true,             b:false         }    }}Schema: {    name:'text',    details: {         one:{ type:'array' },        two: {             a:'checkbox'  // shorthand for { type:'checkbox', label:'a']            b:'checkbox'  // shorthand for { type:'checkbox', label:'b']        }    }}
示例

Github地址:

我是老鱼,白天敲代码,晚上搞自媒体。

课程 | 陪跑 | 项目 | 副业咨询

标签: #表单生成器php #js表单生成器动手实践