Vue外掛-json編輯器

json編輯器- vue-json-edit

安裝方式
npm install vue-json-editor --save

新建vue檔案當做元件使用

<!--**
* 元件名稱 JsonEditor.vue
* @desc 元件描述 json編輯器
* @author 元件作者 midsummer
* @date 2020/12/23 18:12:19 -建立時間
* @param {Object} [title]    - 引數說明
* @param {String} [columns] - 引數說明
* @example 呼叫示例
**-->
<template>
  <vue-json-editor
    v-model="modeJson"
    :show-btns="false"
    :mode="mode"
    lang="zh"
    @json-change="onJsonChange"
    @json-save="onJsonSave"
    @has-error="onError"
  ></vue-json-editor>
</template>

<script>
//這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
//例如：import 《元件名稱》 from '《元件路徑》';
import vueJsonEditor from "vue-json-editor";
export default {
  name: "",
  //import引入的元件需要注入到物件中才能使用
  components: {
    vueJsonEditor,
  },
  props: {
    mode: String,
    json: Object,
  },
  data() {
    //這裡存放資料
    return {
      modeJson: this.json,
    };
  },
  //監聽屬性 類似於data概念
  computed: {},
  //監控data中的資料變化
  watch: {
    json: {
      handler(org) {
        this.modeJson = org;
      },
      deep: true,
      immediate: true,
    },
  },
  beforeCreate() {}, //生命週期 - 建立之前
  //生命週期 - 建立完成（可以訪問當前this例項）
  created() {},
  beforeMount() {}, //生命週期 - 掛載之前
  //生命週期 - 掛載完成（可以訪問DOM元素）
  mounted() {},
  //方法集合
  methods: {
    onJsonChange(value) {
      this.modeJson = value;
      /* console.log("value:", value);
      console.log("value:", this.modeJson); */
    },
    onJsonSave(value) {
      console.log("value:", value);
      console.log("value:", this.modeJson);
      return this.modeJson;
    },
    onError(value) {
      console.log("value:", value);
    },
  },
  beforeUpdate() {}, //生命週期 - 更新之前
  updated() {}, //生命週期 - 更新之後
  beforeDestroy() {}, //生命週期 - 銷燬之前
  destroyed() {}, //生命週期 - 銷燬完成
  activated() {}, //如果頁面有keep-alive快取功能，這個函式會觸發
  filters: {}, //過濾
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css類
/deep/div.jsoneditor-menu a.jsoneditor-poweredBy,
/deep/button.jsoneditor-modes.jsoneditor-separator {
  display: none;
}
</style>

解釋
元件屬性

1. v-model：繫結的json
2. :show-btns: 是否顯示儲存按鈕，預設true
3. :expandedOnStart: 在開始時展開，預設false
4. :mode: 模式，預設樹模式
5. :lang: 語言，預設英文，中文為zh
6. @json-change: json編輯器內容改變時觸發
7. @json-save: 點選儲存時觸發
8. @has-error: 發生錯誤時觸發

隱藏部分樣式，自測

/deep/div.jsoneditor-menu a.jsoneditor-poweredBy,
/deep/button.jsoneditor-modes.jsoneditor-separator {
  display: none;
}

注意
在作為元件使用時，json如果是父元件傳值過來最好是進行監聽，並且重新賦值

watch: {
    json: {
      handler(org) {
        this.modeJson = org;
      },
      deep: true,
      immediate: true,
    },
  },