git地址
https://github.com/josdejong/jsoneditor
- 首先下载
npm install jsoneditor
- 页面引入
<template>
<div>
<div id="jsoneditor" style="width: 100%; height: 300px;"></div>
</div>
</template>
<script>
#引入 jsoneditor
import jsoneditor from 'jsoneditor'
export default {
name: "JsonEditor",
/* eslint-disable vue/require-prop-types */
props: {
value: {
type: Object
}
},
data () {
return {
jsonEditor: null
};
},
watch: {
value (value) {
const editorValue = this.jsonEditor.get();
if (value !== editorValue) {
this.jsonEditor.set(value);
}
}
},
mounted () {
this.initJsonEditor();
},
methods: {
// 初始化jsonEditor
initJsonEditor () {
var container = document.getElementById("jsoneditor");
var options = {
mode: 'view',
modes: ['code','view', 'tree', 'preview'], // allowed modes
error: function (err) {
alert('EF1 ->' + err.toString());
}
};
var editor = new jsoneditor(container, options);
this.jsonEditor = editor;
},
// 获取json
getValue () {
return this.jsonEditor.get();
}
}
};
</script>
- 在main.js 中引入 css 文件
import "jsoneditor/dist/jsoneditor.min.css";
end 大功告成
