element-plus-schema-form
一个简单的 Vue3 组件,能够使用 JSON 模式以声明方式构建和定制 web 表单。基于 Vue3、Vite、Element-plus 构建
安装
node version: >=12.0.0
vite version: >=2.0.0
npm i element-plus-schema-form
基本使用
<template>
<SchemaForm :schemas="schemas" />
</template>
<script>
import { defineComponent } from 'vue'
import { SchemaForm } from 'element-plus-schema-form'
const schemas = [
{
field: 'field1',
component: 'Input',
label: '字段1',
}
]
export default defineComponent({
components: { SchemaForm },
setup () {
return {
schemas
}
}
})
</script>
useForm 方式
需要使用 register 注册组件才能拿到内部的方法
或者直接通过组件的 ref 也可拿到内部的方法
<template>
<SchemaForm @register=register />
</template>
<script>
import { defineComponent } from 'vue'
import { SchemaForm, useForm } from 'element-plus-schema-form'
const schemas = [
{
field: 'field1',
component: 'Input',
label: '字段1',
}
]
export default defineComponent({
components: { SchemaForm },
setup () {
const { register } = useForm(schemas)
return {
schemas
}
}
})
</script>
组件示例
packages/schema-form
运行示例
npm install
npm run dev
示例项目
License
MIT