项目开发过程中遇到展示 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. 可选配置说明
属性说明类型默认值
json传入的json数据（必填）Object-
closed是否折叠全部Booleanfalse
deep展开深度,越大渲染速度越慢,建议不超过5）Number3
icon-style折叠按钮样式，可选值为 [square, circle, triangle ]Stringsquare
icon-color两个折叠按钮的颜色Arraytheme = vs-code 时，[’#c6c6c6’, ‘#c6c6c6’]，其他情况为 [’#747983’, ‘#747983’]
theme可选主题样式,可选值为 [one-dark, vs-code], 不选时为默认的白色主题String-
font-size字体大小,单位 pxNumber14
line-height行高，单位 pxNumber24

注：行高和字体大小不建议选用过大值，因为 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. 关于二次开发

可根据自己项目的实际情况进行如下开发：

  1. 主题定制：根据需求定制主题，不同的主题名称会给组件定义对应的class名称，根据class重新定义样式即可，可参见项目内的主题配置；
  2. 修改icon样式：项目内icon使用的svg,支持三种样式，可自定义更换或者删除不需要的svg文件，以降低打包体积；

推荐阅读： vue-json-editor （ 一款 json 数据编辑插件）

# 前端 # vue.js # html5
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊