项目开发过程中遇到展示 json 的场景，且 json 文件体积过大，小则几百kb。vue-json-views 即使加载 1M 左右的 json 文时，结合deep 深度限制，也能实现秒开的速度，组件压所过后体积只有15.7kb，开启gzip压缩后只有4.74kb。
1. 示例及文档
git clone https://gitee.com/zhengyis/vue-json-views.git npm i npm run dev // 或 直接双击index.html
2. 安装
npm i -S vue-json-views // 注意是 views // 或直接将未编译的组件复制到项目内（推荐该方式，便于自定义修改）
3. 可选配置说明
注：行高和字体大小不建议选用过大值，因为 icon 大小、每行的 padding-left 等参数并不会随之发生改变
4. 应用
4.1 在 vue 中使用
<template> <json-view :data="jsonData"/> </template> <script> import jsonView from 'vue-json-views' export default { components: { jsonView, }, data() { return { // 可使用 JSON.parse() 对json数据转化 jsonData: { name:'dog', age:2, hobby:{ eat:{ food:'狗粮', water:'冰可乐' }, sleep:{ time:'白日梦' } } }, }; }, }; </script>
4.2 在非工程化的项目内引用
<!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>
5. 关于二次开发
可根据自己项目的实际情况进行如下开发：
- 主题定制：根据需求定制主题，不同的主题名称会给组件定义对应的class名称，根据class重新定义样式即可，可参见项目内的主题配置；
- 修改icon样式：项目内icon使用的svg,支持三种样式，可自定义更换或者删除不需要的svg文件，以降低打包体积；
推荐阅读：vue-json-editor （ 一款 json 数据编辑插件）
