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><script setup>
import { CfJsonViewer } from '@chufix-design/vue';
const data = {
id: 'usr_2k1b9e',
name: '张小明',
active,
createdAt: '2025-04-19T08:14:00Z',
tags: ['admin', 'beta'],
};
</script>
<template>
<CfJsonViewer :data="data" />
</template><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
}
}
}
<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><script setup>
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,
flags: { darkMode: true, beta: false },
},
};
</script>
<template>
<CfJsonViewer :data="data" :default-expand-depth="3" show-types />
</template><CfJsonViewer
data={data}
defaultExpandDepth={3}
showTypes
/><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><script setup>
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,
falseValue,
nullValue,
undefinedValue,
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 /><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 浏览器 的讨论