前言

??最近在開發公司的管理系統的操作日志模塊，要查看某條操作日志的請求參數，要將請求的參數以 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數據的展示和管理，提升開發效率和應用的用戶體驗。