x-json-view-vue

Demo

版本

---

• v1.0.14

基于

---

• vue2
• recursion

安装

---

npm install x-json-view-vue

使用

---

在main.js中引入

import xJsonView from 'x-json-view-vue';
vue.use(xJsonView);

组件中使用

 <x-json-view
  :wrap-class="'x-json-view'"
  :show-depth="1"
  :json-data="jsonData"
  :is-show-err-notice="false"
  @handleJsonView="handleJsonView"
>
  <template slot="open">+</template>
  <template slot="close">-</template>
</x-json-view>

说明

---

参数	类型	说明
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

样式说明

---

<div class=wrapClass>
    <div>
        <p>
            <span>
                node-name
                <span>:</span>
            <span>
            <span>
                <span class="node-switch">switch-button</span>
                { | [
            </span>
        <p>
        <div class="npde-list">
            <span>
                node-name
                <span>:</span>
            <span>
            <span class="stringColor | numberColor | booleanColor | nullColor">
                node-value
                <span>,</span>
            </span>
        </div>
    </div>
</div>

---

样式示例 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类型的颜色
        }
    }
}