Vue JSON校验格式化编辑框 -- jsoneditor
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
项目要求编辑框要 字体高亮、可编辑、可格式化、可实时检验,这些jsoneditor都可满足,并且还可以一键修复错误
1,安装
第一种方式:
npm install jsoneditor --save
第二种方式:
(当然可以使用cnpm,但当时用了cnpm,但在main.js中引入文件名时不是官方名称,别人在根据package.json文件install后启动项目会报错,需要自己手动改)
直接去package.json文件中,在dependencies中手动添加,然后npm install (可能会需要删除node_modules)即可
2,使用
2.1 main.js 中
import jsoneditor from 'jsoneditor'
Vue.prototype.$jsoneditor = jsoneditor
2.2 对应文件中
<template>
<div class="hello">
<div id="jsoneditor" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted: function () {
let container = document.getElementById('jsoneditor')
let json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World",
};
let jsons = [
{
"name":"Header Parameters",
"children":
[
{
"name":"Accept",
"dataType":"string",
"required":true,
"defaultValue":"*/*",
"description":"允许接受的类型"
}
]
},
{
"name":"Body Parameters",
"children":[
{
"name":"username",
"dataType":"string",
"required":true,
"defaultValue":"zhangsan",
"description":"用户名"
},{
"name":"duixiang",
"dataType":"object",
"required":true,
"defaultValue":"",
"description":"对象",
"children":[
{
"name":"childName",
"dataType":"string",
"required":true,
"defaultValue":"lisi",
"description":"孩子名"
},
{
"name":"childAge",
"dataType":"int",
"required":true,
"defaultValue":"10",
"description":"密码"
}
]
},{
"name":"shuzu",
"dataType":"array",
"required":true,
"defaultValue":"",
"description":"数组",
"children":[
{
"name":"childNumber",
"dataType":"int",
"required":true,
"defaultValue":"10",
"description":"孩子号"
}
]
}
]
}
]
let options = {
mode: 'code',
modes: ['code'],
onError: function(err) {
alert(err.toString());
}
}
var codeEditor = new this.$jsoneditor(container, options);
codeEditor.set(json)
},
methods: {
},
computed: {
}
}
</script>
<style>
</style>
2-3 获取编辑框中的内容,先初始化声明 this.codeEditorR = {},再调用方法 getText()
this.codeEditorR.getText()
2-4 需要销毁时,先初始化声明 this.codeEditorR = {},调用方法 destroy()
this.codeEditorP.destroy()
3,jsoneditor.js 有各种方法的详细说明,需要时自行查阅即可
4,效果图如下
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
2 个月前
8c391e04
5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)