哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!
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']
}
}
}
示例
标签:Vue,form,生成器,表单,checkbox,base,Vuetify,vuetify From: https://www.cnblogs.com/oldfish517/p/17703590.html