Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zyqwst/json-schema-editor-vue
A json-schema editor of high efficient and easy-to-use, base on Vue
https://github.com/zyqwst/json-schema-editor-vue
json-schema-vue json-schemas
Last synced: 1 day ago
JSON representation
A json-schema editor of high efficient and easy-to-use, base on Vue
- Host: GitHub
- URL: https://github.com/zyqwst/json-schema-editor-vue
- Owner: zyqwst
- License: apache-2.0
- Created: 2020-06-25T04:19:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-15T10:50:52.000Z (4 months ago)
- Last Synced: 2024-12-19T18:09:12.793Z (3 days ago)
- Topics: json-schema-vue, json-schemas
- Language: JavaScript
- Homepage: http://json-schema.sviip.com
- Size: 5.84 MB
- Stars: 293
- Watchers: 2
- Forks: 79
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - zyqwst/json-schema-editor-vue - A json-schema editor of high efficient and easy-to-use, base on Vue (JavaScript)
README
json-schema-editor-vue
[](https://github.com/zyqwst/json-schema-editor-vue/stargazers)
[](https://github.com/zyqwst/json-schema-editor-vue/fork)
[](https://github.com/zyqwst/json-schema-editor-vue/issues?q=is%3Aopen+is%3Aissue)
[](https://www.npmjs.com/package/json-schema-editor-vue)
[](https://www.npmjs.com/package/json-schema-editor-vue)
[](https://www.npmjs.com/package/json-schema-editor-vue)
[](https://github.com/zyqwst/json-schema-editor-vue/blob/master/LICENSE)
A json-schema editor of high efficient and easy-to-use, base on Vue
### 如果你使用Vue3,请查看 [json-schema-editor base on Vue3](https://github.com/zyqwst/json-schema-editor-vue3)
**支持自定义属性，满足特殊的需求**
### Example
**Demo** [http://json-schema.sviip.com](http://json-schema.sviip.com)
**[国内Demo](http://json-schema-editor.sviip.com)**
### Usage
```bash
# vue2
npm install json-schema-editor-vue
# vue3
npm install json-schema-editor-vue3
```
```vue
import JsonSchemaEditor from 'json-schema-editor-vue'
import 'json-schema-editor-vue/lib/json-schema-editor-vue.css'
Vue.use(JsonSchemaEditor)
```
```vue
...
...
export default {
name: 'App',
data() {
return {
tree:
{
root: {
type: "object"
}
}
}
}
}
```
### 额外配置
如果要对json schema增加额外的属性时可以使用extra参数配置额外属性，比如想要对integer和string增加default属性，支持的参数类型有：'string', 'number', 'integer','object', 'array', 'boolean'。
```
data() {
return {
extraSetting: {
integer: { // 对integer生效
default: {
name: "默认值",
type: "integer",
},
},
string: { // 对string类型生效
default: {
name: "默认值",
type: "integer", // default配置可输入的值类型
},
},
},
tree: {
root: {
type: "object",
title: "条件",
properties: {
name: {
type: "string",
title: "名称",
maxLength: 10,
minLength: 2,
},
appId: {
type: "integer",
title: "应用ID",
default: 3,
},
credate: {
type: "string",
title: "创建日期",
format: "date",
},
},
required: ["name", "appId", "credate"],
},
},
};
},
```
### json-schema-editor-vue属性说明如下：
|属性|说明|类型|是否必须|默认值|
:-|:-|:-|:-|:-
|value|传入一个默认的树节点，用来接收编辑后的json schema结果|Object|是||
|disabled|节点名称不可编辑|Boolean||`false`|
|disabledType|节点类型不可选择|Boolean||`false`|
|root|是否是根节点|Boolean||`true`|
|custom|是否允许添加自定义属性|Boolean||`false`|
|lang|国际化(可选zh_CN和en_US)|String||`zh_CN`|
|extra|额外配置属性|Object||null|
Don't forget to star if it helped!
如果对您有帮助，别忘记给个星哦
### Links
- [json-schema-editor-visual](https://github.com/YMFE/json-schema-editor-visual)
- [vue-json-schema-editor-visual](https://github.com/giscafer/vue-json-schema-editor-visual)