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数据的展示和管理，提升开发效率和应用的用户体验。