vue 使用JSON 编辑器： vue-json-editor

1、安装插件

npm install vue-json-editor --save 

2、引入插件并注册

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

3、使用示例

<template>
  <div class="code-json-editor">
    <vue-json-editor
      v-model="jsonContent"       // 绑定的JSON数据
      :showBtns="false"           // -是否显示按钮
      mode="code"                 // 模式：tree  text  form code等
      lang="zh"                   // 语言
      :expanded-on-start="true"   // 初始化时，是否自动展开
      @json-change="onJsonChange" // json改变时，触发的事件
      @json-save="onJsonSave"     // json保存事件
      @has-error="onError"        // 出现错误时，触发的事件
    />
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  components: { vueJsonEditor },
  data() {
    return {
      hasJsonFlag: true, // json是否验证通过
      jsonContent: {}
    }
  },

  methods: {
    onJsonChange(value) {
      // 实时保存
      this.onJsonSave(value)
    },
    onJsonSave(value) {
      this.jsonContent = value
      this.hasJsonFlag = true
    },
    onError(value) {
      console.log('json错误了value:', value)
      this.hasJsonFlag = false
    },
    // 检查json
    checkJson() {
      if (this.hasJsonFlag === false) {
        this.$message.error('请输入格式正确的JSON数据!')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.code-json-editor {
  /* jsoneditor右上角默认有一个链接,加css去掉 */
  /deep/ .jsoneditor-poweredBy {
    display: none !important;
  }
}
</style>

4、实现效果