更新记录

1.0.1（2021-05-30） 下载此版本

1. 优化数据显示，key与value增加颜色区分
2. 增加icon属性，设置折叠按钮图标

1.0.0（2020-09-03） 下载此版本

首发版本

平台兼容性

插件安装

将组件放在组件库里引入即可

import wgJsonView from '@/components/wg-json-view/wg-json-view.vue';

插件属性

插件方法

使用ref方式调用

示范代码

<template>
    <view class="main">
        <view style="display: flex; padding: 16upx 0;">
            <checkbox-group style="transform: scale(0.8);" @change="changeMode" >
                <checkbox value="collapse" :checked="true">可折叠</checkbox>
                <checkbox value="fontsize">加大字体</checkbox>
            </checkbox-group>
        </view>
        <view style="display: flex; padding: 16upx 0;">
            <radio-group @change="changeIcon">
                <text style="margin-right: 16upx;">折叠图标:</text>
                <radio value="plusminus" :checked="true">plusminus</radio>
                <radio value="arrow">arrow</radio>
            </radio-group>
        </view>
        <hr>
        <wg-json-view ref="jsonView" class="uni-border" :fontSize="fontSize" :collapsable="collapsable"
            style="padding: 16upx;" :obj="jsonData" :icon="icon"></wg-json-view>
    </view>
</template>

<script>
    import wgJsonView from '@/components/wg-json-view/wg-json-view.vue';
    export default {
        components: {
            wgJsonView
        },
        data() {
            return {
                collapsable: true,
                fontSize: 24,
                icon: "",
                jsonData: {
                    description: 'WgJsonView, an uniapp component for view JSON datas.',
                    name: 'wgJsonView',
                    author: 'Vicoman',
                    date: new Date('2020-09-02'),
                    version: '1.0.0',
                    time: {
                        hour: 20,
                        minute: 38,
                        second: 22,
                    },
                    '属性': {
                        obj: '要展示的JSON数据.',
                        'font-size': 'number, 字体大小',
                        collapsable: 'boolean, 是否可折叠'
                    },
                    testData: {
                        int: 2020,
                        array: ['string value', 2020, {
                            key: 'name',
                            value: 'Vicoman'
                        }, new Date()],
                        object: {
                            name: 'wgJsonView',
                            author: 'Vicoman',
                            date: new Date('2020-09-02'),
                            version: '1.0.0'
                        }
                    }
                }
            };
        },
        created() {
            // this.jsonData = { constructor: '123', ad: { a: 1}}
        },
        methods: {
            changeMode(e) {
                this.collapsable = e.detail.value.includes("collapse");
                this.fontSize = e.detail.value.includes("fontsize") ? 32 : 24;
            },
            changeIcon(e){
                this.icon = e.detail.value
                console.log(this.icon)
            },
            print() {
                this.$refs.jsonView.print();
            }
        }
    };
</script>

<style scoped>
    .main {
        width: 100vw;
        height: 100vh;
        padding: 32upx;
        box-sizing: border-box;
    }

    checkbox {
        margin: 0 16upx;
    }
</style>