Vue中使用JsonView进行JSON数据展示

前言

最近在开发公司的管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以 JSON 格式的形式展示出来，于是用到了Vue-JSON-Viewer 这个插件。

一、Vue-JSON-Viewer 基础入门

插件简介

Vue-JSON-Viewer 是一个用于在Vue项目中展示JSON数据的组件，它解决了在项目开发中面临的展示JSON数据的需求，尤其是当JSON文件体积较大时，也可以快速渲染。用官方的话来说，就是一个专为 Vue.js 框架设计的简单 JSON 查看器组件，兼容 Vue.js 2.x 及 3.x，并支持服务器端渲染（SSR）。此项目由 JavaScript 编写，采用 MIT 许可证分发，是处理和展示 JSON 数据的理想选择，尤其是对于那些需要以可视化方式查看复杂数据结构的开发者来说。

官网地址： www.npmjs.com/package/vue...

安装插件

安装插件时，可能会遇到因 Vue 版本不匹配导致的安装或运行错误，确保你的 Vue 项目版本与 Vue-JSON-Viewer 的分支相匹配。本文基于 npm 的安装 Vue-JSON-Viewer 插件，执行命令如下：

bash 复制代码

# 对于 Vue 2.x
npm install vue-json-viewer@2 --save

# 对于 Vue 3.x
npm install vue-json-viewer@3 --save

【注意】如果npm安装报错，可换成 cnpm 安装。

引入插件

安装完成后，在项目入口文件中正确引入并注册该组件。引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。如果在全局 main.js 中引入，那么全局可用，无需在单独页面中引入，可直接调用组件。如果在单页面中使用，则需要引入，才可正常使用。代码如下：

javascript 复制代码

import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';

// 非全局的不用写这个，直接在组件中使用标签引入
Vue.use(JsonViewer)

使用插件

初次使用者可能不知道如何正确地将数据传递给 Vue-JSON-Viewer 组件，或者遇到数据更新组件未响应的情况。我们可以使用 :value 属性来绑定 JSON 数据，如下所示：

html 复制代码

<script setup lang="ts">
import JsonViewer from 'vue-json-viewer'

const jsonStr = '{"data":[{"name":"蒙奇·D·路飞","age":18,"sex":"男","address":"风车村"},' +
  '{"name":"娜美","age":19,"sex":"女","address":"东海欧伊科特王国"}]}';

// 注意：绑定得数据一定是JSON，而不是JSON字符串
const jsonData = JSON.parse(jsonStr);
</script>
<template>
  <json-viewer :value="jsonData" copyable></json-viewer>
</template>

其中，value 代表显示的JSON数据，copyable 表示可以复制。效果如下图所示：

对于动态数据更新，确保你的数据对象是响应式的（在 Vue 实例的 data 函数返回的对象里）。如果动态赋值的话，后台数据返回的可能是一个字符 json，需要 string类型的json串转换为json格式 处理才能使用，否则会引起报错。

二、组件的属性、方法

选项

属性	描述	默认值
value	JSON 对象的值，可以使用 v-model，支持响应式
expand-depth	默认展开的层级	1
copyable	展示复制按钮，支持自定义或者设置 true 使用默认文本。默认是`{"copyText":"copy","copiedText":"copied","timeout":2000}`	true
sort	按照key排序展示	false
boxed	为组件添加一个盒样式	false
theme	添加一个自定义CSS类名称	`jv-light`
expanded	默认展开视图	false
`timeformat`	自定义时间格式函数	`time => time.toLocaleString()`
preview-mode	不可折叠模式，默认全部展开	false
show-array-index	是否显示数组索引	true
show-double-quotes	是否展示key双引号	false

事件

事件	描述	值
copied	复制文本后的事件	复制的值
keyclick	点击key的事件

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

Slots

名称	描述	Scope
copy	自定义拷贝按钮	`{copied: boolean}`

三、组件扩展

自定义复制按钮

html 复制代码

<script setup lang="ts">
import JsonViewer from 'vue-json-viewer'

const jsonStr = '{"data":[{"name":"蒙奇·D·路飞","age":18,"sex":"男","address":"风车村"},' +
  '{"name":"娜美","age":19,"sex":"女","address":"东海欧伊科特王国"}]}';

// 注意：绑定得数据一定是JSON，而不是JSON字符串
const jsonData = JSON.parse(jsonStr);
const copyable = ref({
  copyText: '复制',
  copiedText: '复制完成',
  timeout: 2000
})
</script>
<template>
  <json-viewer :value="jsonData" :copyable="copyable"></json-viewer>
</template>

自定义主题

添加 theme="my-awesome-json-theme" Vue-JSON-Viewer 的组件属性，复制粘贴下面的模板并且根据自定义的theme名称做对应调整：

scss 复制代码

.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button { color: #49b3ff }
  .jv-key { color: #111111 }
  .jv-item {
    &.jv-array { color: #111111 }
    &.jv-boolean { color: #fc1e70 } // 布尔值
    &.jv-function { color: #067bca }
    &.jv-number { color: #fc1e70 } // 数字
    &.jv-number-float { color: #fc1e70 }// 数字
    &.jv-number-integer { color: #fc1e70 }// 数字
    &.jv-object { color: #111111 }
    &.jv-undefined { color: #e08331 }
    &.jv-string { // 字符串
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}

四、附录

常见问题

使用这个插件碰到一个问题就是，引入之后报错 import JsonViewer from 'vue-json-viewer' 爆红，提示

解决办法是创建一个 vue-json-viewer.d.ts 文件，增加如下内容：

javascript 复制代码

declare module 'vue-json-viewer';

五、小结

初次使用者可能会忽略组件提供的自定义选项，导致无法充分利用其功能。了解如何通过属性如 boxed、copyable、sort 来调整组件外观和行为，若要进一步定制样式，可以通过覆盖 CSS 类的方式调整，Vue-JSON-Viewer 提供了一系列默认类名，允许个性化设计。利用监听器(@copied)等事件，可以在用户复制数据时执行特定操作，增强用户体验。

通过遵循这些步骤，新用户能够更顺利地集成并利用 Vue-JSON-Viewer 进行JSON数据的展示和管理，提升开发效率和应用的用户体验。