vue-json-editor可視化編輯器的介紹與應用

vue-json-editor可視化編輯器

最近項目中有用到json編輯器，我選用了這款vue的編輯器，看起來也是比較簡潔，接下來就具體介紹一下它，以及內部屬性。

一、vue-json-editor的簡介

vue-json-editor可以編輯json數據，也可以對其進行格式化，我用於請求報文和響應報文的展示和上傳，基本滿足想要的功能，界面比較簡單。

二、安裝vue-json-editor

在目標文件夾中安裝插件。

	// 鍵入命令安裝插件
	npm install vue-json-editor

三、引用vue-json-editor

• 導入vue-json-editor

	// 導入
	import vueJsonEditor from 'vue-json-editor'
	// 局部注冊組件
	export default {
	  components: { vueJsonEditor }
	}

• 頁面引用

	// 頁面中引用vue-json-editor(應用時刪去注釋)
	<template>
        <vue-json-editor
         v-model="resultInfo"  // 雙向綁定數據
         :showBtns="false"   // 是否展示保存按鈕
         :mode="'tree'"   // 默認模式
         lang="zh"  // 語言中文，默認英文
         :expandedOnStart="true" // 是否展開JSON編輯器模式
         @json-change="onJsonChange"  // 改變調用事件
         @json-save="onJsonSave"  // 保存調用事件
        />
	</template>

• 事件調用

	// json編輯器內容變化
    onJsonChange(value) {
      console.log('value:', value); 
    },
    // json編輯器內容保存
    onJsonSave(value) {
       console.log('value:', value);
    },

• 添加測試數據

	// 在data中添加測試數據
      resultInfo: {
            "test1": "1234",
            "test2": "5678",
            "test3": {   
                "test3-1":3,
                "test3-2": [
                    {
                        "test3-2-1":"1233",
                        "test3-2-2":"1155"
                    },
                     {
                        "test3-2-3":"1377",
                        "test3-2-4":"1499"
                    }
                ]
          }
      },

四、vue-json-editor界面展示

• 樹結構
  
  
  樹結構看數據比較直觀，還可以添加你想要的類型的數據。
• 代碼結構
  
  代碼結構的光標通常會定位在一行的內容前面，但是添加刪除內容卻是從內容后面開始，跟平常的光標習慣不一樣，我個人是不習慣用這個展示結構。
• 表單結構
  
• 文本結構
  
  文本結構，比較好添加和編輯內容，我比較常用，可以粘貼其他數據進來。
• 視圖結構
  

五、vue-json-editor屬性

參數	說明	類型	可選值	默認值
v-model	綁定值	object	-	{}
mode	開始時展示結構	string	tree,code,form,text,view	tree
showBtns	保存按鈕是否顯示	boolean	true,false	true
lang	語言	string	zh(中文),en(英文)	en
expandedOnStart	在開始時結構為'tree'，'view'和'form'，是否展開json編輯器	boolean	true,false	false

六、vue-json-editor事件

事件名稱	說明
json-change	輸入內容變化時觸發
json-save	保存內容變化時觸發
has-error	輸入內容不符合json格式時觸發

總體來說，vue的json編輯器還是比較好用的，我是應用在了測試用例模塊上，可以將數據寫入與后端對接，進行調用。