更新记录

0.0.9（2023-08-28）

暴露是否展开数据的方法

0.0.8（2023-08-27）

优化图标和替换upx废弃单位

0.0.7（2023-08-25）

修复微信小程序的bug及对文字颜色进行调色

平台兼容性

插件安装

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

import JsonView from '@/uni_modules/vue3-json-view/JsonView/JsonView.vue';

插件属性

插件方法

使用ref方式调用

示范代码

<template>
    <view class="main">
        <view style="display: flex; padding: 16rpx 0;">
            <checkbox-group style="transform: scale(0.8);" @change="changeMode">
                <checkbox value="collapse" :checked="true">可折叠</checkbox>
                <checkbox value="fontsize">加大字体</checkbox>
            </checkbox-group>
            <checkbox-group style="transform: scale(0.8);" @change="changeExpand">
                <checkbox value="expand">是否展开</checkbox>
            </checkbox-group>
        </view>
        <view style="display: flex; padding: 16rpx 0;">
            <radio-group @change="changeIcon">
                <text style="margin-right: 16rpx;">折叠图标:</text>
                <radio value="plusminus" :checked="true">plusminus</radio>
                <radio value="arrow">arrow</radio>
            </radio-group>
        </view>
        <hr>
        <JsonView ref="jw" :fontSize="fontSize" :collapsable="collapsable" style="padding: 16rpx;" :obj="jsonData"
            :icon="icon"></JsonView>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    import JsonView from '@/uni_modules/vue3-json-view/JsonView/JsonView.vue';
    const collapsable = ref(true);
    const fontSize = ref(24);
    const icon = ref('');
    const jsonData = ref({
        description: 'WgJsonView, an uniapp component for view JSON datas.',
        name: 'wgJsonView',
        author: 'Vicoman',
        date: new Date(),
        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(),
                version: '1.0.0'
            }
        }
    });

    const jw = ref(null);
    // 选择折叠、字体
    const changeMode = (e) => {
        collapsable.value = e.detail.value.includes("collapse");
        fontSize.value = e.detail.value.includes("fontsize") ? 32 : 24;
    };
    // 是否展开
    const changeExpand = () => {
        jw.value.doExpand()
    }
    // 控制台打印
    const print = () => {
        jw.value.print();
    }
    // 是否切换图标
    const changeIcon = (e) => {
        icon.value = e.detail.value
        console.log(icon.value)
    };
</script>

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

vue2版本入口

https://ext.dcloud.net.cn/plugin?id=2687