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