JsonViewer JSON 浏览器
折叠式 JSON 树视图，按值类型上色，支持深度展开、类型徽标。
基础用法
CfJsonViewer 接受任意 JS 值作为 data。对象 / 数组渲染成可折叠节点，叶子节点按类型上色：字符串绿、数字橙、布尔紫、null/undefined 灰斜体。点击行首三角折叠 / 展开。
{
id:"usr_2k1b9e"
name:"张小明"
active:true
createdAt:"2025-04-19T08:14:00Z"
tags:[[2]]
}
<CfJsonViewer :data="data" /><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
}
}
}
<CfJsonViewer
:data="data"
:default-expand-depth="3"
show-types
/><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]]
]
}
<CfJsonViewer :data="data" :default-expand-depth="2" show-types /><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';
反馈与讨论
JsonViewer JSON 浏览器 的讨论