JsonView JSON 视图

用于展示 JSON 数据结构，带语法高亮、展开/折叠、复制等交互。

基础用法

展示 JavaScript 对象或数组，带语法高亮，支持展开/折叠

简单对象

JSON

1

{...} // 5 items

嵌套结构（默认折叠）

JSON

1

{...} // 3 items

大型 JSON（默认展开）

JSON

1

[

2

  

{

3

  

  

"id": 1,

4

  

  

"name": "张三",

5

  

  

"city": "广州",

6

  

  

"tags": [

7

  

  

  

"前端",

8

  

  

  

"Vue"

9

  

  

]

10

  

},

11

  

{

12

  

  

"id": 2,

13

  

  

"name": "李四",

14

  

  

"city": "深圳",

15

  

  

"tags": [

16

  

  

  

"后端",

17

  

  

  

"Node"

18

  

  

]

19

  

},

20

  

{

21

  

  

"id": 3,

22

  

  

"name": "王五",

23

  

  

"city": "北京",

24

  

  

"tags": [

25

  

  

  

"全栈",

26

  

  

  

"React"

27

  

  

]

28

  

}

29

]

<template>
  <div class="demo-section">
    <p class="demo-title">简单对象</p>
    <HxJsonView :data="simpleObj" />

    <p class="demo-title" style="margin-top: 28px">嵌套结构（默认折叠）</p>
    <HxJsonView :data="nestedObj" />

    <p class="demo-title" style="margin-top: 28px">大型 JSON（默认展开）</p>
    <HxJsonView :data="largeArr" :default-expanded="true" />
  </div>
</template>

<script setup lang="ts">
import { HxJsonView } from '@whhx/ui'

const simpleObj = {
  name: '张三',
  age: 28,
  active: true,
  email: 'zhangsan@example.com',
  score: null,
}

const nestedObj = {
  code: 0,
  message: 'success',
  data: {
    id: 10001,
    username: 'admin',
    roles: ['super_admin', 'editor'],
    profile: {
      department: '技术部',
      position: '前端工程师',
      joinedAt: '2022-03-15',
    },
    settings: {
      theme: 'dark',
      language: 'zh-CN',
    },
  },
}

const largeArr = [
  { id: 1, name: '张三', city: '广州', tags: ['前端', 'Vue'] },
  { id: 2, name: '李四', city: '深圳', tags: ['后端', 'Node'] },
  { id: 3, name: '王五', city: '北京', tags: ['全栈', 'React'] },
]
</script>

<style scoped>
.demo-section {
  padding: 4px 0;
}
.demo-title {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
</style>

API

Props

参数	说明	类型	默认值
data	JSON 数据对象（优先级高于从字符串解析）	Record<string, any> | any[]	—
content	JSON 字符串（当 data 未传入时尝试解析此字符串）	string	—
default-expanded	是否默认展开	boolean	false
indent	JSON 缩进空格数	number	2
default-collapsed-depth	默认折叠深度	number	1
collapsed-node-length	超过多少字符自动折叠（0 表示不折叠）	number	20
copyable	是否可以复制	boolean	true

功能说明

• 语法高亮：key 紫色、字符串绿色、数字橙色、布尔/ null 蓝色
• 展开/折叠：点击顶部的「展开/折叠」按钮切换 JSON 视图状态
• 复制：点击复制按钮将格式化后的 JSON 写入剪贴板，成功显示「已复制」反馈

类型定义

import type { JsonViewProps } from '@whhx/ui'