VUE实现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)