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-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数据的展示和管理，提升开发效率和应用的用户体验。
到此这篇关于Vue使用JsonView进行JSON数据展示的文章就介绍到这了,更多相关Vue JsonView展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！