更新记录

1.0.0（2025-08-13）

完整测试各平台

平台兼容性

云端兼容性

uni-app(4.72)

uni-app x(4.74)

JsonDisplay 组件说明文档

组件概述

JsonDisplay 是一个用于展示 JSON 数据结构的递归组件，核心功能是将 JSON 数据以树形结构可视化展示，支持节点的展开与折叠操作，并通过颜色区分不同的数据类型。该组件基于 Vue 3 语法实现，采用单文件组件 (SFC) 形式开发，可直接集成到 Vue 或 uni-app 项目中。

核心功能

1. JSON 结构可视化：将 JSON 数据（对象、数组及基本类型）以层级结构展示
2. 展开/折叠交互：支持点击按钮展开或折叠对象/数组类型的节点
3. 类型区分显示：通过不同颜色标识不同的数据类型（对象、数组、字符串等）
4. 递归渲染：通过组件递归调用实现任意层级的 JSON 数据展示
5. 自动缩进：根据节点层级自动计算缩进量，清晰展示层级关系

组件Props

数据类型支持

组件支持以下 JSON 数据类型的展示，并为每种类型提供独特的颜色标识：

组件结构

组件采用递归结构设计，主要包含以下部分：

1. 节点行：展示当前节点的键名/索引和值（或起始括号）
2. 展开/折叠按钮：仅容器类型节点显示，用于控制子节点的显示/隐藏
3. 子节点容器：当节点展开时，递归渲染所有子节点
4. 闭合括号：与起始括号配对，位于子节点下方，保持结构完整性
5. 逗号分隔符：用于分隔同级节点，最后一个节点不显示逗号

样式说明

组件通过 scoped CSS 实现样式隔离，主要样式类包括：

• .parent-container：节点的最外层容器
• .toggle-container：展开/折叠按钮的容器
• .toggle-btn：展开/折叠按钮（显示 "+" 或 "-"）
• .node-content：节点内容容器（包含键名、分隔符和值）
• .children-container：子节点容器，用于递归渲染子节点
• .closing-bracket：闭合括号容器
• .comma-line：逗号分隔符容器

使用方法

由于该组件为递归组件，通常需要一个父组件来初始化根节点，示例如下：

<template>
  <view class="json-viewer">
    <JsonDisplay 
      :data="jsonData" 
      :level="0" 
      :indentSize="24" 
      :collapsible="true" 
      :defaultExpanded="true" 
      :isRoot="true"
    />
  </view>
</template>

<script setup>
import JsonDisplay from './JsonDisplay.uvue';

// 示例数据
const jsonData = {
  name: "测试数据",
  version: 1.0,
  features: ["展开", "折叠", "类型显示"],
  settings: {
    enabled: true,
    timeout: null
  }
};
</script>

注意事项

1. 组件依赖 Vue 3 的组合式 API（<script setup>）
2. 处理包含循环引用的 JSON 数据会导致递归溢出，需提前处理
3. 过长的字符串会被截断（默认最大长度 50）并添加 "..." 后缀
4. 键名和字符串值中的双引号会被转义为 \"
5. 组件样式中包含平台特定代码（通过条件编译 #ifdef 实现），主要适配 H5 和 APP-WEBVIEW

已知限制

1. 不支持循环引用的 JSON 结构
2. 不支持自定义数据类型的颜色
3. 不支持编辑 JSON 数据，仅用于展示
4. 超大 JSON 数据（超过 1000 个节点）可能导致性能问题

联系作者

• M:*** - VX：haijian_guo

该组件专注于 JSON 数据的结构化展示，代码简洁高效，适合在调试工具、数据可视化等场景中使用。