x-json-view-vue

Demo

$3

*
* v1.0.14

$3

*
* vue2
* recursion

$3

*
```
npm install x-json-view-vue
``

$3

*
在main.js中引入
``
import xJsonView from 'x-json-view-vue';
vue.use(xJsonView);
``

组件中使用
``
:wrap-class="'x-json-view'"
:show-depth="1"
:json-data="jsonData"
:is-show-err-notice="false"
@handleJsonView="handleJsonView"
>



``

$3

*
| 参数 | 类型 | 说明 |
| ------ | ------ | ------ |
|wrapClass| string | 最外层的className |
| showDepth | number | 初始展开json的深度 -1:全部关闭，0：打开第一层，1：打开第二层 ... |
| jsonData | string | json格式的字符串
| isShowErrNotice | boolean | 是否显示默认报错信息，错误也会从子组件emit出来，type=parseError |
| handleJsonView | function | emit的接收方法 |
| open | slot | 打开的按钮slot |
| close | slot | 关闭的按钮slot |

$3

*
``

node-name
:


switch-button
{ | [

node-name
:


node-value
,

``
*
样式示例 less
``
/deep/ .x-parse-view {
.node-list {
margin-left: 25px; // 设置节点的缩进宽度
}
.node-switch {
cursor: pointer; // 设置开关按钮的样式
}
div > p {
height: 25px; // 设置节点的高度
>span:nth-child(2) {
padding-left: 10px; // 设置节点key和value之间的距离
}
.stringColor{
color: #3ab54a; // value为字符串类型的颜色
}
.numberColor{
color: #25aae2; // value为数值类型的颜色
}
.booleanColor{
color: #f98280; // value为布尔类型的颜色
}
.nullColor{
color: #f1592a; // value为null类型的颜色
}
}
}
```