1.0.14 • Published 3 years ago

x-json-view-vue v1.0.14

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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>

说明


参数类型说明
wrapClassstring最外层的className
showDepthnumber初始展开json的深度 -1:全部关闭,0:打开第一层,1:打开第二层 ...
jsonDatastringjson格式的字符串
isShowErrNoticeboolean是否显示默认报错信息,错误也会从子组件emit出来,type=parseError
handleJsonViewfunctionemit的接收方法
openslot打开的按钮slot
closeslot关闭的按钮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类型的颜色
        }
    }
}
1.0.14

3 years ago

1.0.13

3 years ago

1.0.11

3 years ago

1.0.12

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago