前言

最近在開(kāi)發(fā)公司的管理系統(tǒng)的操作日志模塊，要查看某條操作日志的請(qǐng)求參數(shù)，要將請(qǐng)求的參數(shù)以 JSON 格式的形式展示出來(lái)，于是用到了Vue-JSON-Viewer 這個(gè)插件。

一、Vue-JSON-Viewer 基礎(chǔ)入門

插件簡(jiǎn)介

Vue-JSON-Viewer 是一個(gè)用于在Vue項(xiàng)目中展示JSON數(shù)據(jù)的組件，它解決了在項(xiàng)目開(kāi)發(fā)中面臨的展示JSON數(shù)據(jù)的需求，尤其是當(dāng)JSON文件體積較大時(shí)，也可以快速渲染。用官方的話來(lái)說(shuō)，就是一個(gè)專為 Vue.js 框架設(shè)計(jì)的簡(jiǎn)單 JSON 查看器組件，兼容 Vue.js 2.x 及 3.x，并支持服務(wù)器端渲染（SSR）。此項(xiàng)目由 JavaScript 編寫，采用 MIT 許可證分發(fā)，是處理和展示 JSON 數(shù)據(jù)的理想選擇，尤其是對(duì)于那些需要以可視化方式查看復(fù)雜數(shù)據(jù)結(jié)構(gòu)的開(kāi)發(fā)者來(lái)說(shuō)。

官網(wǎng)地址： www.npmjs.com/package/vue-json-viewer

安裝插件

安裝插件時(shí)，可能會(huì)遇到因 Vue 版本不匹配導(dǎo)致的安裝或運(yùn)行錯(cuò)誤，確保你的 Vue 項(xiàng)目版本與 Vue-JSON-Viewer 的分支相匹配。本文基于 npm 的安裝 Vue-JSON-Viewer 插件，執(zhí)行命令如下：

# 對(duì)于 Vue 2.x
npm install vue-json-viewer@2 --save

# 對(duì)于 Vue 3.x
npm install vue-json-viewer@3 --save

【注意】如果npm安裝報(bào)錯(cuò)，可換成 cnpm 安裝。

引入插件

安裝完成后，在項(xiàng)目入口文件中正確引入并注冊(cè)該組件。引入插件有兩種方式，可以全局引入，也可以在單個(gè)頁(yè)面文件中引入該插件。如果在全局 main.js 中引入，那么全局可用，無(wú)需在單獨(dú)頁(yè)面中引入，可直接調(diào)用組件。如果在單頁(yè)面中使用，則需要引入，才可正常使用。代碼如下：

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

// 非全局的不用寫這個(gè)，直接在組件中使用標(biāo)簽引入
Vue.use(JsonViewer) 

使用插件

初次使用者可能不知道如何正確地將數(shù)據(jù)傳遞給 Vue-JSON-Viewer 組件，或者遇到數(shù)據(jù)更新組件未響應(yīng)的情況。我們可以使用 :value 屬性來(lái)綁定 JSON 數(shù)據(jù)，如下所示：

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

const jsonStr = '{"data":[{"name":"蒙奇·D·路飛","age":18,"sex":"男","address":"風(fēng)車村"},' +
  '{"name":"娜美","age":19,"sex":"女","address":"東海歐伊科特王國(guó)"}]}';

// 注意：綁定得數(shù)據(jù)一定是JSON，而不是JSON字符串
const jsonData = JSON.parse(jsonStr);
</script>
<template>
  <json-viewer :value="jsonData" copyable></json-viewer>
</template>

其中，value 代表顯示的JSON數(shù)據(jù)，copyable 表示可以復(fù)制。效果如下圖所示：

對(duì)于動(dòng)態(tài)數(shù)據(jù)更新，確保你的數(shù)據(jù)對(duì)象是響應(yīng)式的（在 Vue 實(shí)例的 data 函數(shù)返回的對(duì)象里）。如果動(dòng)態(tài)賦值的話，后臺(tái)數(shù)據(jù)返回的可能是一個(gè)字符 json，需要 string類型的json串轉(zhuǎn)換為json格式 處理才能使用，否則會(huì)引起報(bào)錯(cuò)。

二、組件的屬性、方法

選項(xiàng)

事件

點(diǎn)擊 copy 后，若是我們需要看到被復(fù)制后的反應(yīng)信息提示的話，就需要為復(fù)制進(jìn)行一個(gè)事件監(jiān)聽(tīng)。這時(shí)候，就需要添加一個(gè) @copied 事件即可。

Slots

三、組件擴(kuò)展

自定義復(fù)制按鈕

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

const jsonStr = '{"data":[{"name":"蒙奇·D·路飛","age":18,"sex":"男","address":"風(fēng)車村"},' +
  '{"name":"娜美","age":19,"sex":"女","address":"東海歐伊科特王國(guó)"}]}';

// 注意：綁定得數(shù)據(jù)一定是JSON，而不是JSON字符串
const jsonData = JSON.parse(jsonStr);
const copyable = ref({
  copyText: '復(fù)制',
  copiedText: '復(fù)制完成',
  timeout: 2000
})
</script>
<template>
  <json-viewer :value="jsonData" :copyable="copyable"></json-viewer>
</template>

自定義主題

添加 theme="my-awesome-json-theme" Vue-JSON-Viewer 的組件屬性，復(fù)制粘貼下面的模板并且根據(jù)自定義的theme名稱做對(duì)應(yīng)調(diào)整：

.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 } // 數(shù)字
    &.jv-number-float { color: #fc1e70 }// 數(shù)字
    &.jv-number-integer { color: #fc1e70 }// 數(shù)字
    &.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;
        }
      }
    }
  }
}

四、附錄

常見(jiàn)問(wèn)題

使用這個(gè)插件碰到一個(gè)問(wèn)題就是，引入之后報(bào)錯(cuò) import JsonViewer from 'vue-json-viewer' 爆紅，提示

解決辦法是創(chuàng)建一個(gè) vue-json-viewer.d.ts 文件，增加如下內(nèi)容：

declare module 'vue-json-viewer';

五、小結(jié)

初次使用者可能會(huì)忽略組件提供的自定義選項(xiàng)，導(dǎo)致無(wú)法充分利用其功能。了解如何通過(guò)屬性如 boxed、copyable、sort 來(lái)調(diào)整組件外觀和行為，若要進(jìn)一步定制樣式，可以通過(guò)覆蓋 CSS 類的方式調(diào)整，Vue-JSON-Viewer 提供了一系列默認(rèn)類名，允許個(gè)性化設(shè)計(jì)。利用監(jiān)聽(tīng)器(@copied)等事件，可以在用戶復(fù)制數(shù)據(jù)時(shí)執(zhí)行特定操作，增強(qiáng)用戶體驗(yàn)。

通過(guò)遵循這些步驟，新用戶能夠更順利地集成并利用 Vue-JSON-Viewer 進(jìn)行JSON數(shù)據(jù)的展示和管理，提升開(kāi)發(fā)效率和應(yīng)用的用戶體驗(yàn)。

到此這篇關(guān)于Vue使用JsonView進(jìn)行JSON數(shù)據(jù)展示的文章就介紹到這了,更多相關(guān)Vue JsonView展示JSON數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論