<template><div class="stringTest"><vue-json-editorv-model="vstringData" //编辑器中的内容:showBtns="false" // 保存按钮mode="code"lang="zh":expanded-on-start="true"@json-change="onJsonChange" //改变内容时触发@json-save="onJsonSave" //点击保存按钮@has-error="onError" //校验json内容/></div>
</template><script>export default {components: { },data() {return {hasJsonFlag: true, // json是否验证通过vstringData: {//这个变量可以为空，编辑器会显示为{}style: {width: "300px",height: "30px",display: "flex",},data: {name: "任务名称",title: "",help: "请输入字符串类型的内容",default: "",widget: {},reg: {},isLoad: false,readonly: false,},},};},mounted() {},methods: {onJsonChange(value) {// 实时保存this.onJsonSave(value);},onJsonSave(value) {this.vstringData = value;this.hasJsonFlag = true;},onError(value) {this.$message.error(`json错误了${value}`);this.hasJsonFlag = false;},// 检查jsoncheckJson() {if (this.hasJsonFlag === false) {this.$message.error("请输入格式正确的JSON数据!");return false;} else {return true;}},},
};
</script><style lang="less" scoped>
.stringTest {width: 100%;height: 100%;box-sizing: border-box;padding: 20px;background: lightyellow;/* jsoneditor右上角默认有一个链接,加css去掉 *//deep/ .jsoneditor-poweredBy {display: none !important;}/*修改高度*//deep/ .jsoneditor-outer {height: 500px;margin-top: 10px;}/*修改菜单栏背景颜色,原始背景为蓝色，为了和整体页面风格一致，改为黑色*//deep/ .jsoneditor-menu {background-color: #000;border-bottom: 1px solid #000;}/*修改输入框边框颜色*//deep/.jsoneditor {border: 1px solid #000;}
}
</style>大概效果的如下：
