vue-json-viewer實現JSON效果【高亮、可摺疊、可複製】

初學前端，用的架子是 vue+element ，目前有個需求，想將string類型的json字符串，以json格式展示。

 

利用vue-json-viewer插件，利用這個插件，可方便快速實現 高亮，JSON摺疊，copy 三種功能 ！！！

官網地址：https://www.npmjs.com/package/vue-json-viewer

 

效果展示

先放最終效果：

 

 

效果看完，那麼我們來上乾貨了！

安裝vue-json-viewer插件

基於npm的安裝：

$ npm install vue-json-viewer --save

基於yarn的安裝：

$ yarn add vue-json-viewer

代碼實現

在script 裏面導入包

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
 
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
// or 
// components: {JsonViewer}

在template裏面加入如下一種： 其中jsonData必須是json類型的數據。

<json-viewer :value="jsonData"></json-viewer>
 
<hr />
 
<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>

然後靜態文件和引入都寫好後，在script裏面，定義jsonData，爲它賦值

1、寫死的實現：

2、動態賦值實現

// 任務詳情
    getJobDetail(index, row) {
      getJobDetail({
        jobName: row.jobName,
        jobGroupName: row.jobGroup
      }).then((res) => {
        this.jsonData = res.data.paramJson
      })
    }

這個方法是，調用任務詳情接口，返回一個任務的詳情，賦值給this.jsonData。即可實現接口賦值了。

 

最終。簡單的實現方式就完成了！

 

可選配置說明

<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort></json-viewer>

參數	說明	默認值
value	JSON 數據(支持與 v-model使用)	Required
expand-depth	在此深度下，進一步下陷	1
copyable	顯示“複製”按鈕，可以自定義複製文本只需設置{copy text:'copy'，copiedText:'copied'}或設置爲true使用默認的copyText	false
sort	顯示前排序鍵	false
boxed	爲component組件添加一個奇特的“盒裝”樣式	false
theme	添加自定義CSS類以創建主題	jv-light

 擴展

因爲必須是JSON類型的數據才能展示，有些情況得到的是string類型的json數據，那麼需要將string類型的json數據轉換爲json類型。

下面我提供兩個方法，供大家參考選用，一個是判斷該string類型的數據是否是json；另一個方法是string轉json。

 

判斷string是否是json格式的字符串

function isJSON(str) {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }

        } catch(e) {
            console.log('error：'+str+'!!!'+e);
            return false;
        }
    }
    console.log('It is not a string!')
}

 

string類型的json字符串，轉換爲json格式

JSON.parse(str)