vue-json-viewer 展示json数据
当项目需要再网页中展示原始的json数据的时候，我们期望能够对json进行格式化展示，并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。
1. 安装
$ npm install vue-json-viewer@2 --save
// Vue2
$ npm install vue-json-viewer@3 --save
// Vue3
2. 配置
在main.js中添加以下内容，或者在单独的插件文件中添加。
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)
引入样式
import 'vue-json-viewer/style.css'
3. 使用
<json-viewer :value="jsonData"></json-viewer>
常用配置：
| 属性名 | 描述 | 是否必传 |
|---|---|---|
value |
JSON data (can be used with v-model) |
Required |
expand-depth |
展开层级 | 1 |
copyable |
展示复制按钮 | false |
sort |
排序 | false |
boxed |
为组件添加一个盒样式 | false |
theme |
添加一个和主题相关的类 | jv-light |
expanded |
默认是否展开 | false |
timeformat |
时间格式化函数 | time => time.toLocaleString() |
preview-mode |
不可折叠模式，默认全部展开 | false |
show-array-index |
展示数组的下标 | true |
事件
| 事件 | 描述 | 值 |
|---|---|---|
copied |
复制文本后的事件 | |
keyclick |
点击key的事件 |
Slots
| 名称 | 描述 | Scope |
|---|---|---|
copy |
自定义拷贝按钮 | {copied: boolean} |
快捷键
| 名称 | 描述 |
|---|---|
alt + click |
展开当前节点下的所有节点 |
主题
有两个办法创建自定义主题, (e.g. my-awesome-json-theme):
- 添加
theme="my-awesome-json-theme"JsonViewer的组件属性 - 复制粘贴下面的模板并且根据自定义的theme名称做对应调整:
// values are default one from jv-light template
.my-awesome-json-theme {
background: #fff;
white-space: nowrap;
color: #525252;
font-size: 14px;
font-family: Consolas, Menlo, Courier, monospace;
.jv-ellipsis {
color: #999;
background-color: #eee;
display: inline-block;
line-height: 0.9;
font-size: 0.9em;
padding: 0px 4px 2px 4px;
border-radius: 3px;
vertical-align: 2px;
cursor: pointer;
user-select: none;
}
.jv-button { color: #49b3ff }
.jv-key { color: #111111 }
.jv-item {
&.jv-array { color: #111111 }
&.jv-boolean { color: #fc1e70 }
&.jv-function { color: #067bca }
&.jv-number { color: #fc1e70 }
&.jv-number-float { color: #fc1e70 }
&.jv-number-integer { color: #fc1e70 }
&.jv-object { color: #111111 }
&.jv-undefined { color: #e08331 }
&.jv-string {
color: #42b983;
word-break: break-word;
white-space: normal;
}
}
.jv-code {
.jv-toggle {
&:before {
padding: 0px 2px;
border-radius: 2px;
}
&:hover {
&:before {
background: #eee;
}
}
}
}
}
显示：
