x-json-view-vue3 v1.0.2

x-json-view-vue

Demo

版本

• v1.0.1

基于

• vue3
• recursion

安装

npm install x-json-view-vue3

使用

在main.js中引入

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

// 组件内使用
import { xJsonView } from 'x-json-view-vue3';

组件中使用

 <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>

说明

样式说明

<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类型的颜色
        }
    }
}