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 数据的理想选择，尤其是对于那些需要以可视化方式查看复杂数据结构的开发者来说。
官网地址： https://www.npmjs.com/package/vue-json-viewer
安装插件
安装插件时，可能会遇到因 Vue 版本不匹配导致的安装或运行错误，确保你的 Vue 项目版本与 Vue-JSON-Viewer 的分支相匹配。本文基于 npm 的安装 Vue-JSON-Viewer 插件，执行命令如下：
# 对于 Vue 2.x
npm install vue-json-viewer@2 --save
# 对于 Vue 3.x
npm install vue-json-viewer@3 --save
【注意】如果npm安装报错，可换成 cnpm 安装。
引入插件
安装完成后，在项目入口文件中正确引入并注册该组件。引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。如果在全局 main.js 中引入，那么全局可用，无需在单独页面中引入，可直接调用组件。如果在单页面中使用，则需要引入，才可正常使用。代码如下：
import Vue from 'vue';
import JsonViewer from 'vue-json-viewer';
// 非全局的不用写这个，直接在组件中使用标签引入
Vue.use(JsonViewer)
使用插件
初次使用者可能不知道如何正确地将数据传递给 Vue-JSON-Viewer 组件，或者遇到数据更新组件未响应的情况。我们可以使用 :value 属性来绑定 JSON 数据，如下所示：
<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} |
三、组件扩展
自定义复制按钮
<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名称做对应调整：
.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 文件，增加如下内容：
declare module 'vue-json-viewer';
五、小结
初次使用者可能会忽略组件提供的自定义选项，导致无法充分利用其功能。了解如何通过属性如 boxed、copyable、sort 来调整组件外观和行为，若要进一步定制样式，可以通过覆盖 CSS 类的方式调整，Vue-JSON-Viewer 提供了一系列默认类名，允许个性化设计。利用监听器(@copied)等事件，可以在用户复制数据时执行特定操作，增强用户体验。
通过遵循这些步骤，新用户能够更顺利地集成并利用 Vue-JSON-Viewer 进行JSON数据的展示和管理，提升开发效率和应用的用户体验。
