vue-json-views
Advanced tools
开发背景：
项目开发过程中遇到展示json的场景，且json文件体积过大，小则几百kb，也尝试了已经开源的部分组件，但由于节点过多，渲染速度过慢，无法使用，已有项目技术选型为vue，无法再使用react相关技术，所以考虑自己开发一款。
开发过程中参考了react-json-view部分api,组件实现的功能比较基础，但满足基本业务场景，也提供了一些可选配置。
即使加载1M左右的json文时，也能实现快速打开
git clone https://github.com/zhaoxuhui1122/vue-json-view.git
npm i
npm run dev
或 直接双击index.html
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>
在非工程化的项目内引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="build/index.js"></script>
<style>
#app{
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<json-view :data="json"/>
</div>
<script>
window.onload = function(){
new Vue({
el:'#app',
data(){
return {
json:{}
}
},
components:{
jsonView:window['vue-json-view'].default
}
})
}
</script>
</body>
</html>
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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等参数并不会随之发生改变
可根据自己项目的实际情况进行如下开发
v1.0.0
优化加载速度，实现所有节点展开时也能较快加载
优化前
优化后
FAQs
一个用于展示json的vue组件
We found that vue-json-views demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.