vue-json-viewer插件实现JSON数据在页面的展示高亮、可折叠、可复制


利用vue-json-viewer插件，利用这个插件，可方便快速实现 高亮，JSON折叠，copy 三种功能 ！！！

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

效果展示

需要展示的JSON数据：

1
2
3
4
5
6
7
{
  "Data": {
    "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEudVwiLCBpdGVtcylcblxuICAgICAgICBleHBvcnRKU09OID0gY3JlYXRlRXhwb3J0KGl0ZW1zKVxuICAgICAgICBVcGxvYWRCaW5hcnkoXCJOYW1lLERhdGEsQXBwbGljYXRpb25JZCxEYXRhTWltZVRFwiLCBcInNldFwiLCAkQnVmZmVyS2V5LCBKU09ORW5jb2RlKGJ1ZmZlcl9kYXRhKSlcbiAgICAgICAgJHJlc3VsdCA9IGJ1ZmZlcl9kYXRhW1wiYmluYXJ5X2lkXCJdXG4gICAgfVxufSIsDQogICAgICAgICAgICAiVHlwZSI6ICJjb250cmFjdHMiDQogICAgICAgIH0NCiAgICBdDQp9",
    "MimeType": "application/json",
    "Name": "system.json"
  }
}

先放最终效果：

效果看完，那么我们来上干货了！

安装vue-json-viewer插件

基于npm的安装：

1
$ npm install vue-json-viewer --save

基于yarn的安装：

1
$ yarn add vue-json-viewer

代码实现

在script 里面导入包

1
2
3
4
import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer);

在vue项目中引入里面加入如下一种： 其中jsonData必须是json类型的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
  <div class="block-content-single-item">
        <label class="block-content-label">{<!-- -->{ $t('parameters') }}</label>
        <span class="block-content-text">
          <json-viewer
            :value="jsonViewer"
            :expand-depth="5"
            :copyable="copyable"
            boxed
            sort
            @copied="onCopy"
          ></json-viewer>
        </span>
      </div>

然后静态文件和引入都写好后，在script里面，定义jsonData，为它赋值

1、写死的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  data() {
    return {
      jsonData: {
        name: 'renlei',
        age: 18
      },
      copyable: {
        copyText: this.$t('share'),
        copiedText: this.$t('shared'),
        timeout: 2000
      },
    };
  },

2、动态赋值实现

如果动态赋值的话，后台数据返回的可能是一个字符json，需要string类型的json字符串，转换为json格式处理才能使用。然后将处理的数据复制给jsonData,否则会引起报错。

可选配置说明

:value="jsonData"
:expand-depth=5
copyable
boxed
sort>

参数 说明 默认值
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

Listeners

Listener Description Value
copied Emits copyEvent after text copied Clipboard success event

点击cody后，我们需要看到被复制后的反应信息提示的话，就需要为复制进行一个事件监听这时候就需要添加一个@copied 事件即可。