Vue-json-Editor 封装使用

Vue-json-Editor

json可视化编辑器

安装插件
npm install vue-json-editor --save

封装使用方法（父传子）
ps:父传子，在父组件中通过属性传值，子组件通过prop接收

1. 新建子组件

<template>
<div class="jsonEditor">
    <vue-json-editor
        :style="{'height': height + 'px !important'}"
        v-model="value"
        :mode="'code'"
        @json-change="onJsonChange"
        @json-save="onJsonSave"
        @has-error="onError"
        />
</div>

</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
    name: "JsonEditor", 
    props:  {
        /* 编辑器的内容 */
        value: {
            type: String,
            default: "",
        },
        height:{
            type: Number,
            default: 260,
        }
    },
    components: { vueJsonEditor },
    data(){
        return {
        }
    },
    methods: {
        onJsonChange (value) {
            // console.log('更改value:', value);
            // 实时保存
            this.onJsonSave(value)
        },
        onJsonSave (value) {
            // console.log('保存value:', value);
            this.resultInfo = value
            this.hasJsonFlag = true
        },
        onError(value) {
            // console.log("json错误了value:", value);
            this.hasJsonFlag = false
        },
        // 检查json
        checkJson(){
            if (this.hasJsonFlag == false){
            // console.log("json验证失败")
            // this.$message.error("json验证失败")
            alert("json验证失败")
            return false
            } else {
            // console.log("json验证成功")
            // this.$message.success("json验证成功")
            alert("json验证成功")
            return true
            }
        },

    }
}
</script>
<style >
  /* jsoneditor右上角默认有一个链接,加css去掉了 */
   .jsoneditor-poweredBy{
      display: none;
    }
    .jsoneditor-vue{
        height: 100%;
    }
   
</style>

2. 在父组件中
   1） 引入组件
   import JsonEditor from "@/components/JsonEditor";
   2） 局部注册组件
   components: { JsonEditor },
   3） 使用组件

<!-- height 高度  value 展示的数据-->
<JsonEditor :height="400" :value="form.operParam"></JsonEditor>