npm install vue-json-editor --save 

import vueJsonEditor from 'vue-json-editor'
export default {
  components: { vueJsonEditor },
}

<template>
  <div class="code-json-editor">
    <vue-json-editor
      v-model="jsonContent"       // 綁定的JSON數(shù)據(jù)
      :showBtns="false"           // -是否顯示按鈕
      mode="code"                 // 模式：tree  text  form code等
      lang="zh"                   // 語(yǔ)言
      :expanded-on-start="true"   // 初始化時(shí)，是否自動(dòng)展開
      @json-change="onJsonChange" // json改變時(shí)，觸發(fā)的事件
      @json-save="onJsonSave"     // json保存事件
      @has-error="onError"        // 出現(xiàn)錯(cuò)誤時(shí)，觸發(fā)的事件
    />
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  components: { vueJsonEditor },
  data() {
    return {
      hasJsonFlag: true, // json是否驗(yàn)證通過
      jsonContent: {}
    }
  },

  methods: {
    onJsonChange(value) {
      // 實(shí)時(shí)保存
      this.onJsonSave(value)
    },
    onJsonSave(value) {
      this.jsonContent = value
      this.hasJsonFlag = true
    },
    onError(value) {
      console.log('json錯(cuò)誤了value:', value)
      this.hasJsonFlag = false
    },
    // 檢查json
    checkJson() {
      if (this.hasJsonFlag === false) {
        this.$message.error('請(qǐng)輸入格式正確的JSON數(shù)據(jù)!')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.code-json-editor {
  /* jsoneditor右上角默認(rèn)有一個(gè)鏈接,加css去掉 */
  /deep/ .jsoneditor-poweredBy {
    display: none !important;
  }
}
</style>