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,
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文件快速解析渲染》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端 Docker 镜像体积优化
- 缩减Docker镜像体积历程总结
- 缩减Docker镜像体积历程总结
- APK体积优化的一些总结
- 重构之路:webpack打包体积优化(超详细)
- Laravel框架中缩小Vue应用的体积
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
计算机程序设计艺术
Donald E.Knuth / 黄林鹏 / 机械工业出版社 / 2010-8 / 69.00元
《计算机程序设计艺术(第4卷·第0册):组合算法与布尔函数概论(双语版)》是《计算机程序设计艺术,第4卷:组合算法》的第0册。《计算机程序设计艺术(第4卷·第0册):组合算法与布尔函数概论(双语版)》介绍了组合搜索历史和演化,涉及组合搜索技术的理论和实践应用,探究了布尔函数相关的所有重要问题,考察了如何最有效地计算一个布尔函数的值的技术。本册是《计算机程序设计艺术的》第7章,即组合搜索一长篇宏论的......一起来看看 《计算机程序设计艺术》 这本书的介绍吧!