数据展示

NnJsonViewer JSON 查看器

格式化、滚动与复制 JSON。

示例

API

Props

名称	类型	默认值	说明
value	object | unknown[] | string | number | boolean | null	null	待展示内容。以 { 或 [ 开头的字符串会尝试按 JSON 解析；失败时原样展示。
indent	number | string	2	JSON 缩进空格数；转为有限数字后向下取整并限制在 0..10，无效值回退 2。
copyable	boolean	false	显示复制按钮；复制的是格式化后的完整文本。
copyText	string	'复制'	复制按钮文字。
wrap	boolean	false	是否以 pre-wrap 换行长内容。
maxHeight	string | number	—	内容区最大高度；数字或纯数字字符串按 px，其他字符串作为 CSS 值。
emptyText	string	'暂无数据'	value 为 null、undefined 或空字符串时的空状态文字。
ariaLabel	string	'JSON 内容'	内容 <pre> 的无障碍标签。

Events

事件	参数	说明
copy	(text: string)	剪贴板写入成功后触发，参数为格式化文本。
copyError	(error: unknown)	Clipboard API 与后备复制均失败时触发。

Slots

名称	作用域参数	说明
default	{ text: string }	替换 <code> 内容；仍由 value 决定是否进入空状态。
toolbar	{ text: string, copy: () => void }	工具栏左侧内容；传入该插槽时即使 copyable=false 也显示工具栏。
empty	—	替换空状态。