利用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>

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

在此深度下,进一步下陷

1
copyable显示“复制”按钮,可以自定义复制文本只需设置{copy text:'copy',copiedText:'copied'}或设置为true使用默认的copyTextfalse
sort 显示前排序键false
boxed为component组件添加一个奇特的“盒装”样式false
theme 添加自定义CSS类以创建主题jv-light


Listeners

ListenerDescriptionValue
copiedEmits copyEvent after text copiedClipboard success event

 

 
 

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

Logo

前往低代码交流专区

更多推荐