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

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

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

效果展示

需要展示的JSON数据：

{
  "Data": {
    "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEudVwiLCBpdGVtcylcblxuICAgICAgICBleHBvcnRKU09OID0gY3JlYXRlRXhwb3J0KGl0ZW1zKVxuICAgICAgICBVcGxvYWRCaW5hcnkoXCJOYW1lLERhdGEsQXBwbGljYXRpb25JZCxEYXRhTWltZVRFwiLCBcInNldFwiLCAkQnVmZmVyS2V5LCBKU09ORW5jb2RlKGJ1ZmZlcl9kYXRhKSlcbiAgICAgICAgJHJlc3VsdCA9IGJ1ZmZlcl9kYXRhW1wiYmluYXJ5X2lkXCJdXG4gICAgfVxufSIsDQogICAgICAgICAgICAiVHlwZSI6ICJjb250cmFjdHMiDQogICAgICAgIH0NCiAgICBdDQp9",
    "MimeType": "application/json",
    "Name": "system.json"
  }
}

先放最终效果： 

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

安装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);

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

  <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、写死的实现：

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,否则会引起报错。

可选配置说明

<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

Listeners

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

 

 

 

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