1.npm下载
npm i -S vue-json-views
2. 可选配置说明
属性 | 说明 | 类型 | 默认值 |
---|
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 |
3. 在 vue 中使用
<template>
<div>
<json-view :data="jsonData" deep="2" />
</div>
</template>
<script>
import jsonView from 'vue-json-views'
export default {
components: {
jsonView
},
data() {
return {
jsonData: {
name: "小明",
age: 18,
items3: {
like: "pingpang",
skip: 0,
},
},
}
},
};
</script>