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类型的数据。

  

        {{ $t('parameters') }}
        
          
        
      

然后静态文件和引入都写好后，在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,否则会引起报错。

可选配置说明

参数说明默认值valueJSON 数据(支持与 v-model使用)Requiredexpand-depth

在此深度下，进一步下陷

1copyable显示“复制”按钮，可以自定义复制文本只需设置{copy text:'copy'，copiedText:'copied'}或设置为true使用默认的copyTextfalsesort 显示前排序键falseboxed为component组件添加一个奇特的“盒装”样式falsetheme 添加自定义CSS类以创建主题jv-light Listeners ListenerDescriptionValuecopiedEmits copyEvent after text copiedClipboard success event  

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