Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tggcs/schema-json-vue
a form builder based on jsonschema
https://github.com/tggcs/schema-json-vue
form-builder json-schema jsonschema vue-jsonschema
Last synced: about 1 month ago
JSON representation
a form builder based on jsonschema
- Host: GitHub
- URL: https://github.com/tggcs/schema-json-vue
- Owner: tggcs
- Created: 2019-04-17T09:24:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:13:13.000Z (about 2 years ago)
- Last Synced: 2024-10-12T00:38:47.690Z (3 months ago)
- Topics: form-builder, json-schema, jsonschema, vue-jsonschema
- Language: Vue
- Homepage: https://tggcs.github.io/projects/schema-json-vue/index.html
- Size: 3.61 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# schema-json-vue
## 功能
演示 https://tggcs.github.io/projects/schema-json-vue/index.html
参考 https://mozilla-services.github.io/react-jsonschema-form/
实现了一个vue2的版本，当前支持简单的功能。
支持了五种输入控件：单行文本[默认]，多行文本[textarea]，单选[enum默认]，计数器[step]，开关[switch]
支持了一种属性：必填[required]
## 调用
```shell
npm install schema-json-vue -S
```
因为使用了ElementUI组件，还需要安装下ElementUI
main.js
``` javascript
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
import 'schema-json-vue/dist/schema-json-vue.css';
import SchemaJsonVue from 'schema-json-vue'
Vue.use(ElementUI)
Vue.use(SchemaJsonVue)
```
***.vue
``` javascript
...
...
data() {
return {
json: {},
schema: {
title: "完整样例-班级",
description: "完整样例-班级-描述",
type: "object",
required: ["grade", "classinfo"],
properties: {
teacher: {
title: "班主任",
description: "嵌套Object 班主任 描述",
type: "object",
required: ["name"],
properties: {
name: {
type: "string",
title: "姓名",
description: "班主任老师名称",
default: "李老师"
},
remark: {
type: "string",
widget: "textarea",
title: "备注"
},
isSpecial: {
type: "boolean",
widget: "switch",
title: "特级教师"
}
}
},
subject: {
type: "array",
title: "课程",
items: {
title: "课程名称",
type: "string",
default: "语文"
}
},
grade: {
type: "string",
title: "年级",
default: "高一"
},
classinfo: {
type: "string",
title: "班级信息",
widget: "textarea",
default: "这是高一11班"
},
nums: {
type: "integer",
title: "人数",
widget: "step",
default: 20
},
kind: {
title: "类型",
type: "string",
enum: ["文科", "理科"]
},
students: {
title: "学员",
type: "array",
items: {
type: "object",
required: ["name", "sex"],
properties: {
name: {
title: "姓名",
type: "string",
default: "学生甲"
},
sex: {
title: "性别",
type: "string",
description: "学员的性别",
enum: ["男", "女"],
default: "男"
}
}
}
}
}
}
}
},
methods: {
handleChange(val) {
}
}
```
## API
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| schema | schema结构 | Object | {} | — |
| formData | 初始数据 | Object | {} | — |
### Events
| 参数 | 说明 | 回调参数 |
|------------- |---------------- |---------------- |
| onDataChange | change事件 | 返回当前表单填写的数据 |
### todo
1.循环引用
2.v1.2.0