npm i -S vue-json-views // 注意是 views
import jsonView from 'vue-json-views'
<template>
<json-view :data="json"/>
</template>
<script>
import jsonView from '@/components/json-view';
export default {
components: {
jsonView
},
data() {
return {
json: { /* json data*/ }
}
}
}
</script>
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 |