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

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

内容简介:项目开发过程中遇到展示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文件快速解析渲染》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

深入理解C#(第3版)

深入理解C#(第3版)

斯基特 (Jon Skeet) / 姚琪琳 / 人民邮电出版社 / 2014-4-1 / 99.00元

本书是世界顶级技术专家“十年磨一剑”的经典之作,在C#和.NET领域享有盛誉。与其他泛泛介绍C#的书籍不同,本书深度探究C#的特性,并结合技术发展,引领读者深入C#的时空。作者从语言设计的动机出发,介绍支持这些特性的核心概念。作者将新的语言特性放在C#语言发展的背景之上,用极富实际意义的示例,向读者展示编写代码和设计解决方案的最佳方式。同时作者将多年的C#开发经验与读者分享,读者可咀其精华、免走弯......一起来看看 《深入理解C#(第3版)》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具