JsonViewer

使用场景

JsonViewer 组件可用于 JSON 数据的展示与编辑。底层参考了 VS Code 的 text-buffer 数据结构设计思路，结合功能/样式定制需求实现，视觉上与设计体系内其他组件更协调，对特定数据类型的定制化渲染更方便。相比直接使用 MonacoEditor，JsonViewer 仅关注 JSON 数据格式，更轻量、加载更快、内存占用更少，开箱即用无需关注复杂的构建配置。

• 如果你仅需要对 JSON 做预览/编辑，无需对更复杂的其他编程语言作修改，建议选用 JsonViewer。
• 如果你还需要处理其他格式的数据/代码文件，完整的代码编辑器能力（语法高亮、代码补全、错误提示、复杂编辑等）是刚需，构建产物体积不是关注重点，建议选用 Monaco Editor。

代码演示

如何引入

import { JsonViewer } from '@chenzy-design/svelte';

基本用法

JsonViewer 的基本用法。传入 height 和 width 参数设置组件的高度和宽度，通过 value 传入 JSON 字符串。

只读模式

配置 options 的 readOnly 参数为 true 时，内容不可编辑，仅用于展示（此时搜索/替换工具条中的替换栏也不会渲染）。

设置行高

配置 options 的 lineHeight 参数，设置固定行高（单位：px，默认 18）。

自动换行

配置 options 的 autoWrap 参数，设置为 true 时，组件会根据内容长度自动换行。

格式化配置

配置 options 的 formatOptions 参数，设置组件的格式化配置。

• tabSize：number，设置缩进大小为 4，表示每级缩进 4 个空格
• insertSpaces：boolean，true 表示使用空格进行缩进，false 表示使用制表符（Tab）
• eol：string，设置换行符，可以是 \n、\r\n

自定义渲染规则

通过配置 options.customRenderRule 参数，你可以自定义 JSON 内容的渲染方式（注意：仅在只读模式下生效）。

const targetPath = 'root.<key>';
// 仅匹配 key
match: (_value, path, tokenType) => tokenType === 'key' && path === targetPath;
// 仅匹配 value
match: (value, path, tokenType) => tokenType === 'value' && path === targetPath;

customRenderRule 是一个规则数组，每条规则包含两个属性：

• match：匹配条件，可以是以下三种类型之一：
  • 字符串：精确匹配
  • 正则表达式：按正则匹配
  • 函数：自定义匹配逻辑，函数签名为 (value, path, tokenType) => boolean
    • value：待匹配的值（JSON 键或值）。当 match 为函数时，value 会尽量传入解析后的原始类型（number / boolean / null / string），因此可以使用 === 进行严格匹配；当 match 为字符串或正则时，仍基于文本内容匹配（字符串类型会去除两侧引号）
    • path：当前匹配到的路径，格式为 root.key1.key2.key3[0].key4
    • tokenType：当前 token 的类型，'key' 表示 JSON 键名，'value' 表示 JSON 值，可用于区分同名键和值的匹配
• render：自定义渲染函数，函数签名为 (content: string) => HTMLElement
  • content：匹配到的内容。如果是字符串类型的值，将包含双引号（如 "name"、"Semi"）

自定义搜索按钮

通过 renderSearchButton 属性，你可以自定义搜索按钮的渲染方式，实现固定位置、自定义样式等需求。

API 参考

JsonViewer

JsonViewerOptions

CustomRenderRule

FormattingOptions

SearchControls

当使用 renderSearchButton 时，第二个参数 controls 包含以下属性：

Methods

可以通过 bind:this 拿到组件实例，调用其上绑定的方法，实现某些特殊交互。