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>