<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>

?大概效果的如下：