vue-json-view 一款用于展示json的vue组件，支持大体积json文件快速解析渲染

栏目: JavaScript · 发布时间: 4年前

内容简介：项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一款。开发过程中参考了react-json-view部分api,组件实现的功能比较基础，但满足基本业务场景，也提供了一些可选配置。

在线示例

开发背景：

项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一款。

开发过程中参考了react-json-view部分api,组件实现的功能比较基础，但满足基本业务场景，也提供了一些可选配置。

即使加载1M左右的json文时，结合deep深度限制，也能实现秒开的速度

组件压所过后体积只有15.7kb，开启gzip压缩后只有4.74kb，

vue-json-view 一款用于展示json的vue组件，支持大体积json文件快速解析渲染

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等参数并不会随之发生改变

以上所述就是小编给大家介绍的《vue-json-view 一款用于展示json的vue组件，支持大体积json文件快速解析渲染》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

互联网+ 战略版

刘润 / 中国华侨出版社 / 2015-5-1 / 49.8

1、“互联网+”上升为国家战略，“互联网+”成为下一个超级畅销书的热点话题在商业环境巨变的今天，传统企业该怎么走？传统企业转型是一个系统工程，如何定战略、抓主要矛盾？ 2、首本“互联网＋传统企业”的战略指导书。“我互联网＋”时代到来了，传统企业的外部环境发生了哪些变化？了解商业新生代的新商业环境，跟之前工业时代的不同，从战略上指导传统企业转型，更安全也更大局把握游刃有余。一起来看看《互联网+ 战略版》这本书的介绍吧!

码农工具