<template>
<div class="stringTest">
<vue-json-editor
v-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;
},
// 检查json
checkJson() {
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>
大概效果的如下: