开发预览更新于 2026-05-10

JsonViewer JSON 浏览器

折叠式 JSON 树视图，按值类型上色，支持深度展开、类型徽标。

基础用法

CfJsonViewer 接受任意 JS 值作为 data。对象 / 数组渲染成可折叠节点，叶子节点按类型上色：字符串绿、数字橙、布尔紫、null/undefined 灰斜体。点击行首三角折叠 / 展开。

背景

{

id:"usr_2k1b9e"

name:"张小明"

active:true

createdAt:"2025-04-19T08:14:00Z"

tags:[[2]]

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  id: 'usr_2k1b9e',
  name: '张小明',
  active: true,
  createdAt: '2025-04-19T08:14:00Z',
  tags: ['admin', 'beta'],
};
</script>

<template>
  <CfJsonViewer :data="data" />
</template>

<CfJsonViewer data={data} />

深度展开 + 类型徽标

defaultExpandDepth 控制初始展开层数（0 = 全折叠，1 = 只展开顶层，2 = 展两层 …）。showTypes 在每个叶子值后面挂一个 string / number / boolean 等小徽标 — 调试 schema 时有用。

背景

{

api:"/v1/users"string

pagination:{

page:1number

pageSize:20number

total:312number

}

filters:{

active:trueboolean

role:"admin"string

}

meta:{

plan:"pro"string

seats:12number

nullable:nullnull

flags:{

darkMode:trueboolean

beta:falseboolean

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  api: '/v1/users',
  pagination: { page: 1, pageSize: 20, total: 312 },
  filters: { active: true, role: 'admin' },
  meta: {
    plan: 'pro',
    seats: 12,
    nullable: null,
    flags: { darkMode: true, beta: false },
  },
};
</script>

<template>
  <CfJsonViewer :data="data" :default-expand-depth="3" show-types />
</template>

<CfJsonViewer
data={data}
defaultExpandDepth={3}
showTypes
/>

全类型样例

下面这份数据覆盖 string / number / boolean / null / undefined / array / object 七种类型，可以一眼看清各类型的着色和折叠行为。

背景

{

string:"混合中英文 with emoji 🎯"string

multilineString:"line one line two"string

positiveNumber:12345.678number

negativeNumber:-0.42number

zero:0number

trueValue:trueboolean

falseValue:falseboolean

nullValue:nullnull

undefinedValue:undefinedundefined

emptyArray:[

]

emptyObject:{

}

nestedArray:[

1number

[[2]]

]

}

<script setup lang="ts">
import { CfJsonViewer } from '@chufix-design/vue';

const data = {
  string: '混合 中英文 with emoji 🎯',
  multilineString: 'line one\nline two',
  positiveNumber: 12345.678,
  negativeNumber: -0.42,
  zero: 0,
  trueValue: true,
  falseValue: false,
  nullValue: null,
  undefinedValue: undefined,
  emptyArray: [],
  emptyObject: {},
  nestedArray: [1, [2, [3, [4]]]],
};
</script>

<template>
  <CfJsonViewer :data="data" :default-expand-depth="2" show-types />
</template>

<CfJsonViewer data={data} defaultExpandDepth={2} showTypes />

API

属性	类型	默认值	说明
`data`	`unknown`	`—`	要渲染的 JSON-like 值，可以是任意 JS 对象
`defaultExpandDepth`	`number`	`1`	初始展开层数
`showTypes`	`boolean`	`false`	在叶子节点旁显示类型徽标
`bordered`	`boolean`	`true`	边框
`lineNumbers`	`boolean`	`false`	预留 — 行号显示开关
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号

类型导出：

type JsonValueType =
  | 'null'
  | 'undefined'
  | 'boolean'
  | 'number'
  | 'string'
  | 'array'
  | 'object';