vue-json-view 一款用於展現json的vue組件，支持大致積json文件快速解析渲染

在線示例

開發背景：

項目開發過程當中遇到展現json的場景，且json文件體積過大，小則幾百kb，也嘗試了已經開源的部分組件，但因爲節點過多，渲染速度過慢，沒法使用，已有項目技術選型爲vue，沒法再使用react相關技術，因此考慮本身開發一款。

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

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

組件壓所事後體積只有15.7kb，開啓gzip壓縮後只有4.74kb，

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文件，以下降打包體積
• ...