一个基于Vue模型的表单生成器
End
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地址：https://github.com/wotamann/vuetify-form-base
