Vue中引入使用 vue-json-views

飞熊 • 2023年4月28日上午10:18 • 前端开发 • 阅读 186

项目开发过程中遇到展示 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	是否折叠全部	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 等参数并不会随之发生改变

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>