vue-json-view 一款用於展示json的vue元件，支援大體積json檔案快速解析渲染

小眼萌發表於2019-05-09
VueJSONView元件

線上示例

開發背景：

專案開發過程中遇到展示json的場景，且json檔案體積過大，小則幾百kb，也嘗試了已經開源的部分元件，但由於節點過多，渲染速度過慢，無法使用，已有專案技術選型為vue，無法再使用react相關技術，所以考慮自己開發一款。

開發過程中參考了react-json-view部分api,元件實現的功能比較基礎，但滿足基本業務場景，也提供了一些可選配置。

即使載入1M左右的json文時，結合deep深度限制，也能實現秒開的速度

元件壓所過後體積只有15.7kb，開啟gzip壓縮後只有4.74kb，

image.png

1.檢視示例

線上示例

git clone  https://github.com/zhaoxuhui1122/vue-json-view.git
npm i
npm run dev

或 直接雙擊index.html
複製程式碼

2.在專案中使用

npm i -S vue-json-views  // 注意是 views
import jsonView from 'vue-json-views'

或

直接將未編譯的元件複製到專案內（推薦該方式，便於自定義修改）

複製程式碼
<template>
    <json-view :data="json"/>
</template>

<script>
    import jsonView from '@/components/json-view';

    export default {
        components: {
            jsonView
        },
        data() {
            return {
                json: { /* json data*/ }
            }
        }
    }
</script>
複製程式碼

3.可選配置說明

屬性 說明 型別 預設值
json 傳入的json資料（必填） Object -
closed 是否摺疊全部 Boolean false
deep 展開深度,越大渲染速度越慢,建議不超過5 Number 3
icon-style 摺疊按鈕樣式，可選值為square、circle、triangle String square
icon-color 兩個摺疊按鈕的顏色 Array theme=vs-code時，['#c6c6c6', '#c6c6c6']，其他情況為['#747983', '#747983']
theme 可選主題樣式,可選值為one-dark、vs-code，不選時為預設的白色主題 String -
font-size 字型大小,單位px Number 14
line-height 行高，單位px Number 24

注：行高和字型大小不建議選用過大值，因為icon大小、每行的padding-left等引數並不會隨之發生改變

4.關於二次開發

可根據自己專案的實際情況進行如下開發

  • 主題定製：根據需求定製主題，不同的主題名稱會給元件定義對應的class名稱，根據class重新定義樣式即可，可參見專案內的主題配置
  • 修改icon樣式：專案內icon使用的svg,支援三種樣式，可自定義更換或者刪除不需要的svg檔案，以降低打包體積
  • ...

相關文章