BizJsonViewer JSON 查看器

树形 JSON 展示：递归折叠展开、按类型着色（key 主色 / 字符串绿 / 数字橙 / 布尔红 / null 灰）、悬浮行复制节点路径 / 节点值、工具栏一键展开全部 / 收起全部 / 复制全文；超长字符串默认截断（悬浮显示全文）。接口报文核对、回调原文留档、系统配置审查、日志详情、工单排障。

基础用法

root:{

code:0

message:"success"

data:{… 5 项}

}

接口回调报文：默认展开 1 层，折叠节点显示「… N 项」。

<script setup lang="ts">
/** 场景：接口回调报文核对——展开折叠 + 类型着色 + 复制 */
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const payload = {
  code: 0,
  message: 'success',
  data: {
    orderNo: 'SO20260928001',
    buyer: { id: 99001, name: '杭州某某科技', level: 'VIP2' },
    items: [
      { sku: 'KB-87', name: '机械键盘', qty: 2, price: 399 },
      { sku: 'MS-W1', name: '无线鼠标', qty: 1, price: 129 },
    ],
    paid: true,
    discount: null,
  },
}
</script>

<template>
  <div style="max-width: 720px">
    <BizJsonViewer :data="payload" />
  </div>
</template>

展开层级控制

收起1 层2 层3 层

config:{

app:{

gateway:{… 2 项}

}

default-expand-depth 控制初始展开层级（0 = 全收起）。

<script setup lang="ts">
/** 场景：深层配置审查——default-expand-depth 控制初始展开层级 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const depth = ref(2)

const config = {
  app: {
    gateway: {
      routes: [
        { path: '/api/order', upstream: 'order-svc', timeout: 3000 },
        { path: '/api/pay', upstream: 'pay-svc', timeout: 5000 },
      ],
      retry: { count: 2, backoff: 'exponential' },
    },
  },
}
</script>

<template>
  <div style="max-width: 720px">
    <ElRadioGroup v-model="depth" style="margin-bottom: 10px">
      <ElRadioButton :value="0">收起</ElRadioButton>
      <ElRadioButton :value="1">1 层</ElRadioButton>
      <ElRadioButton :value="2">2 层</ElRadioButton>
      <ElRadioButton :value="3">3 层</ElRadioButton>
    </ElRadioGroup>
    <BizJsonViewer :data="config" name="config" :default-expand-depth="depth" :key="depth" />
  </div>
</template>

复制路径与节点值

resp:{

data:{… 2 项}

}

悬浮任意行 → 右侧出现复制按钮：路径示例 data.list[0].attrs.tags[1]，值示例为该节点的 JSON 文本

悬浮任意行 → 右侧复制按钮：路径（如 data.list[0].attrs.tags[1]）与节点值。

<script setup lang="ts">
/** 场景：取数路径调试——悬浮行显示「复制路径 / 复制节点值」，配合后端字段核对 */
import { ElAlert } from 'element-plus'
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const payload = {
  data: {
    list: [
      { id: 1, attrs: { color: 'red', tags: ['new', 'hot'] } },
      { id: 2, attrs: { color: 'blue', tags: [] } },
    ],
    total: 2,
  },
}
</script>

<template>
  <div style="max-width: 720px">
    <BizJsonViewer :data="payload" name="resp" />
    <ElAlert
      style="margin-top: 10px"
      type="info"
      :closable="false"
      show-icon
      title="悬浮任意行 → 右侧出现复制按钮：路径示例 data.list[0].attrs.tags[1]，值示例为该节点的 JSON 文本"
    />
  </div>
</template>

顶层数组

orders:[

0:{… 3 项}

1:{… 3 项}

2:{… 3 项}

]

根节点为数组的列表报文，收起时预览条数。

<script setup lang="ts">
/** 场景：顶层数组——订单列表报文（根即数组），收起时显示条数预览 */
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const orders = [
  { id: 'A001', amount: 1280, status: 'paid' },
  { id: 'A002', amount: 660, status: 'pending' },
  { id: 'A003', amount: 99.9, status: 'refunded' },
]
</script>

<template>
  <div style="max-width: 720px">
    <BizJsonViewer :data="orders" name="orders" :default-expand-depth="1" />
  </div>
</template>

超长字段截断

session:{

token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOi…

refreshInterval:1800

permissions:[… 2 项]

}

max-length 截断长 token / base64，悬浮 title 显示全文。

<script setup lang="ts">
/** 场景：超长字段截断——token / base64 等长字符串默认折叠，悬浮显示全文 title */
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const session = {
  token:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI5OTAwMSIsIm5hbWUiOiLlk4jlnYDnu4znkIUiLCJyb2xlIjoiYWRtaW4iLCJleHAiOjE3NTkzNTQ0MDB9.signature-part',
  refreshInterval: 1800,
  permissions: ['order:add', 'order:export'],
}
</script>

<template>
  <div style="max-width: 720px">
    <BizJsonViewer :data="session" name="session" :default-expand-depth="1" :max-length="48" />
  </div>
</template>

动态数据 + 展开收起全部

订单回调退款回调

payload:{… 3 项}

切换数据源后用工具栏「展开全部 / 收起全部」快速核对。

<script setup lang="ts">
/** 场景：动态数据源 + 展开/收起全部——请求切换后一键展开核对 */
import { ref } from 'vue'
import { ElButton, ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizJsonViewer } from 'vue3-ep-biz-lib'

const source = ref<'order' | 'refund'>('order')

const orderPayload = { type: 'order', list: [{ id: 1 }, { id: 2 }], total: 2 }
const refundPayload = { type: 'refund', records: [{ rid: 'R1', ok: true }, { rid: 'R2', ok: false }] }
type Payload = typeof orderPayload | typeof refundPayload

const data = ref<Payload>(orderPayload)

const switchSource = (): void => {
  source.value = source.value === 'order' ? 'refund' : 'order'
  data.value = source.value === 'order' ? orderPayload : refundPayload
}
</script>

<template>
  <div style="max-width: 720px">
    <div style="margin-bottom: 10px; display: flex; gap: 10px; align-items: center">
      <ElRadioGroup :model-value="source" @change="switchSource">
        <ElRadioButton value="order">订单回调</ElRadioButton>
        <ElRadioButton value="refund">退款回调</ElRadioButton>
      </ElRadioGroup>
      <ElButton size="small" text bg @click="switchSource">刷新报文</ElButton>
    </div>
    <BizJsonViewer :data="data" name="payload" :default-expand-depth="0" />
  </div>
</template>

Props

属性名	类型	默认值	说明
data	`unknown`	—	待展示的 JSON 数据（必填，对象 / 数组 / 基础类型均可）
name	`string`	`'root'`	根节点名称
default-expand-depth	`number`	`1`	初始展开层级（0 = 全部收起）
show-copy	`boolean`	`true`	是否展示节点复制按钮
max-length	`number`	`60`	字符串截断长度

Slots

插槽名	说明
（无）	工具栏「展开全部 / 收起全部 / 复制全文」内置，无需插槽

BizJsonViewer JSON 查看器 ​

基础用法 ​

展开层级控制 ​

复制路径与节点值 ​

顶层数组 ​

超长字段截断 ​

动态数据 + 展开收起全部 ​

Props ​

Slots ​