Vue中引入使用 vue-json-views

项目开发过程中遇到展示 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>

5. 关于二次开发

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

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

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

Vue中引入使用 vue-json-views相关推荐

vue中引入路径的用法
一.Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 -/ -/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对 ...
vue学习笔记十：Vue中引入jquery
文章目录前言一.引入方式 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目二.使用方法 1.使用Vue CLI 创建的项目 2.直接引入vue方式的项目总结前言本篇实现vu ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...
vue中引入全年日历插件calendar.js
针对依赖amazeui的全年日历插件在vue项目中的问题 cnpm i jquery cnpm i amazeui 在当前vue中引入jquery .amazeui及相关css或这全局引入(看其他是否 ...

Vue中引入使用 vue-json-views

1. 示例及文档

2. 安装

3. 可选配置说明

4. 应用

5. 关于二次开发

Vue中引入使用 vue-json-views相关推荐

最新文章

热门文章

Vue中 引入使用 vue-json-views

1. 示例及文档

2. 安装

3. 可选配置说明

4. 应用

5. 关于二次开发

Vue中 引入使用 vue-json-views相关推荐

最新文章

热门文章

Vue中引入使用 vue-json-views

Vue中引入使用 vue-json-views相关推荐