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

￡神魔★判官ぃ 2022-12-27 08:34 1026阅读 0赞

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

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

### **效果展示** ###

需要展示的JSON数据：

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

先放最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

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

### 安装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>

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>value</code></td> 
   <td>JSON 数据(支持与&nbsp;<code>v-model使用</code>)</td> 
   <td><strong>Required</strong></td> 
  </tr> 
  <tr> 
   <td><code>expand-depth</code></td> 
   <td> <p>在此深度下，进一步下陷</p> </td> 
   <td><code>1</code></td> 
  </tr> 
  <tr> 
   <td><code>copyable</code></td> 
   <td>显示“复制”按钮，可以自定义复制文本只需设置{copy text:'copy'，copiedText:'copied'}或设置为true使用默认的copyText</td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td><code>sort</code></td> 
   <td>&nbsp;显示前排序键</td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td><code>boxed</code></td> 
   <td>为component组件添加一个奇特的“盒装”样式</td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td><code>theme</code></td> 
   <td>&nbsp;添加自定义CSS类以创建主题</td> 
   <td><code>jv-light</code></td> 
  </tr> 
 </tbody> 
</table>

##    Listeners ##

<table> 
 <thead> 
  <tr> 
   <th>Listener</th> 
   <th>Description</th> 
   <th>Value</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>copied</code></td> 
   <td>Emits copyEvent after text copied</td> 
   <td>Clipboard success event</td> 
  </tr> 
 </tbody> 
</table>

# #

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

[https_www.npmjs.com_package_vue-json-viewer]: https://www.npmjs.com/package/vue-json-viewer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221120/ed8e18376a3e48c4af0678ad7a3f9619.png