欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用JsonView進行JSON數(shù)據(jù)展示

 更新時間：2025年03月26日 10:19:58   作者：獨淚了無痕  
Vue-JSON-Viewer 是一個用于在Vue項目中展示JSON數(shù)據(jù)的組件,它解決了在項目開發(fā)中面臨的展示JSON數(shù)據(jù)的需求,下面就跟隨小編一起來了解下它的具體使用吧

前言

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

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

插件簡介

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

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

安裝插件

安裝插件時，可能會遇到因 Vue 版本不匹配導致的安裝或運行錯誤，確保你的 Vue 項目版本與 Vue-JSON-Viewer 的分支相匹配。本文基于 npm 的安裝 Vue-JSON-Viewer 插件，執(zhí)行命令如下：

# 對于 Vue 2.x
npm install vue-json-viewer@2 --save

# 對于 Vue 3.x
npm install vue-json-viewer@3 --save

【注意】如果npm安裝報錯，可換成 cnpm 安裝。

引入插件

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

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

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

使用插件

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

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

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

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

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

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

二、組件的屬性、方法

選項

屬性描述默認值
valueJSON 對象的值，可以使用 v-model，支持響應(yīng)式
expand-depth默認展開的層級1
copyable展示復制按鈕，支持自定義或者設(shè)置 true 使用默認文本。
默認是{"copyText":"copy","copiedText":"copied","timeout":2000}		true
sort按照key排序展示false
boxed為組件添加一個盒樣式false
theme添加一個自定義CSS類名稱jv-light
expanded默認展開視圖false
timeformat自定義時間格式函數(shù)time => time.toLocaleString()
preview-mode不可折疊模式，默認全部展開false
show-array-index是否顯示數(shù)組索引true
show-double-quotes是否展示key雙引號false

事件

事件描述值
copied復制文本后的事件復制的值
keyclick點擊key的事件

點擊 copy 后，若是我們需要看到被復制后的反應(yīng)信息提示的話，就需要為復制進行一個事件監(jiān)聽。這時候，就需要添加一個 @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":"東海歐伊科特王國"}]}';

// 注意：綁定得數(shù)據(jù)一定是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 的組件屬性，復制粘貼下面的模板并且根據(jù)自定義的theme名稱做對應(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;
        }
      }
    }
  }
}

四、附錄

常見問題

使用這個插件碰到一個問題就是，引入之后報錯 import JsonViewer from 'vue-json-viewer' 爆紅，提示

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

declare module 'vue-json-viewer';

五、小結(jié)

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

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

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

相關(guān)文章

最新評論