vue-json-viewer实现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>

 扩展
因为必须是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)