# @ctechhindi/vue3-json-viewer 中文文档

规范地址：https://npmcn.com/package/%40ctechhindi/vue3-json-viewer/

版本：1\.0\.5
npm 元数据更新时间：2025-08-16T07:12:37.749Z
中文译文更新时间：2026-11-11T08:30:33.865Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ctechhindi/vue3-json-viewer
原文对照：https://npmcn.com/package/%40ctechhindi/vue3-json-viewer/?lang=original
项目主页：https://github.com/jeevan-lal/vue3-json-viewer#readme
源码仓库：https://github.com/jeevan-lal/vue3-json-viewer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：154 kB，34 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2025-08-14T05:44:32.319Z
- 最新版本发布：2025-08-16T07:12:37.577Z
- 近 30 天下载量：2627（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

具有树和文字模式的现代 Sleek Vue 3 JSON 查看器组件

## 安装

```sh
npm install @ctechhindi/vue3-json-viewer
```

也可以使用：`pnpm add @ctechhindi/vue3-json-viewer`、`yarn add @ctechhindi/vue3-json-viewer`、`bun add @ctechhindi/vue3-json-viewer`

## README

# Vue 3 JSON 查看器

一个现代的 sleek Vue 3 组件,用于以两种视图模式:树模式和文字模式来查看,编辑和操纵JSON数据. \]

[解析页面](https://vue3-json-viewer-seven.vercel.app/)

## \* 特性

-   🌳 **树模式**: 有可扩展/可缩放节点的分级显示
-   📝 **文本模式**: Raw JSON 有语法突出显示的文本显示
-   ✏️ **内置编辑**: 在树视图中直接编辑值
-   🔑 **密钥编辑**: 通过双击重命名对象密钥
-   ➕ **添加/删除节点**: 添加新的密钥值对或删除已存在的对
-   🔍 **搜索过滤( F)**:搜索所有 JSON 密钥和值
-   📋 **复制到剪贴板**:简便地复制JSON内容并带有视觉反馈
-   💾 **下载 JSON**: 保存当前 JSON 到文件
-   🎨 **暗/ 亮主题**: 支持两个带有动态图标的主题
-   📱 **响应设计**: 桌面和移动设备工程
-   ⌨️ **键盘导航**: 完整的键盘支持
-   ♿ **无障碍**: 屏幕阅读器支持,并带有适当的ARIA标签
-   🎯 **只有图标模式**: 为压缩接口隐藏按钮文本标签的选项
-   🎛️ **自定义 UI**: 隐藏特定按钮、区域或整个页眉/页脚
-   🚀 **双重构建系统**: npm + demo 预览库构建

## \* 安装

此组件现在在 npm 上可用 `@ctechhindi/vue3-json-viewer`

[@ctechhindi/vue3-json-查看器](https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer)

```bash
npm install @ctechhindi/vue3-json-viewer
```

或用纱线:

```bash
yarn add @ctechhindi/vue3-json-viewer
```

## 使用量

### CSS 导入( 需要)

**重要内容:** 您需要导入 CSS 文件来查看样式 。 选择其中一项选项 :

```typescript
// Option 1: Direct CSS import (recommended)
import "@ctechhindi/vue3-json-viewer/dist/index.css";

// Option 2: Using the styles export
import "@ctechhindi/vue3-json-viewer/styles";

// Option 3: Using the css export
import "@ctechhindi/vue3-json-viewer/css";

// Option 4: In your main.ts or main.js
import "@ctechhindi/vue3-json-viewer/dist/index.css";
```

### 基本用途

```vue
<template>
  <div>
    <JsonViewer
      v-model:data="jsonData"
      :editable="true"
      theme="light"
      default-mode="tree"
      @update:data="handleDataUpdate"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import JsonViewer from "@ctechhindi/vue3-json-viewer";

const jsonData = ref({
  name: "John Doe",
  age: 30,
  active: true,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St",
    city: "Anytown",
  },
});

const handleDataUpdate = (newData: any) => {
  console.log("Data updated:", newData);
};
</script>
```

### 高级使用

```vue
<template>
  <JsonViewer
    v-model:data="complexData"
    :editable="true"
    :theme="currentTheme"
    default-mode="tree"
    :show-line-numbers="true"
    :max-depth="3"
    :hide-action-text="false"
    @update:data="handleDataUpdate"
    @node-click="handleNodeClick"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse"
    @edit-start="handleEditStart"
    @edit-save="handleEditSave"
    @edit-cancel="handleEditCancel"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import JsonViewer from "@ctechhindi/vue3-json-viewer";

const complexData = ref({
  // Your complex JSON data
});

const currentTheme = ref<"light" | "dark">("light");

// Event handlers
const handleDataUpdate = (newData: any) => {
  console.log("Data updated:", newData);
};

const handleNodeClick = (node: any) => {
  console.log("Node clicked:", node);
};

const handleNodeExpand = (node: any) => {
  console.log("Node expanded:", node);
};

const handleNodeCollapse = (node: any) => {
  console.log("Node collapsed:", node);
};

const handleEditStart = () => {
  console.log("Edit mode started");
};

const handleEditSave = (data: any) => {
  console.log("Changes saved:", data);
};

const handleEditCancel = () => {
  console.log("Edit cancelled");
};
</script>
```

### 自定义 UI 元素

您可以使用可见道具隐藏特定的 UI 元素 :

```vue
<template>
  <JsonViewer
    v-model:data="jsonData"
    :hide-header="false"
    :hide-footer="true"
    :hide-mode-switcher="false"
    :hide-tree-controls="false"
    :hide-edit-controls="false"
    :hide-search-button="true"
    :hide-copy-button="false"
    :hide-download-button="true"
    :hide-theme-button="false"
  />
</template>
```

### 最小配置

最小, 仅读取的查看器 :

```vue
<template>
  <JsonViewer
    v-model:data="jsonData"
    :editable="false"
    :hide-header="false"
    :hide-footer="true"
    :hide-edit-controls="true"
    :hide-search-button="true"
    :hide-copy-button="false"
    :hide-download-button="true"
    :hide-theme-button="false"
  />
</template>
```

## ++ Propals 软件

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `data` | `any` | `{}` | 要显示的 JSON 数据 |
| `editable` | `boolean` | `true` | 启用编辑能力 |
| `theme` | `'light' | 'dark'` | `'light'` | 主题偏好 |
| `defaultMode` | `'tree' | 'text'` | `'tree'` | 默认视图模式 |
| `showLineNumbers` | `boolean` | `false` | 在文本模式中显示行号 |
| `maxDepth` | `number` | `3` | 默认扩展的最大深度 |
| `hideActionText` | `boolean` | `false` | 隐藏按钮文本标签( 仅包含逗号) |

### UI 可见道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `hideHeader` | `boolean` | `false` | 隐藏整个菜单栏( 标题) |
| `hideFooter` | `boolean` | `false` | 隐藏整个页脚 |
| `hideModeSwitcher` | `boolean` | `false` | 隐藏树/ 文本模式切换器 |
| `hideTreeControls` | `boolean` | `false` | 隐藏全部展开/ 拼接所有按钮 |
| `hideEditControls` | `boolean` | `false` | 隐藏编辑/保存/取消按钮 |
| `hideSearchButton` | `boolean` | `false` | 隐藏搜索按钮 |
| `hideCopyButton` | `boolean` | `false` | 隐藏复制按钮 |
| `hideDownloadButton` | `boolean` | `false` | 隐藏下载按钮 |
| `hideThemeButton` | `boolean` | `false` | 隐藏主题切换按钮 |

## 活动

| 活动 | 有效载荷 | 说明 |
| --- | --- | --- |
| `update:data` | `newData: any` | 数据已更改事件 |
| `node-click` | `node: JsonNode` | 点出节点事件 |
| `node-expand` | `node: JsonNode` | 节点扩展事件 |
| `node-collapse` | `node: JsonNode` | 节点崩溃事件 |
| `edit-start` | \- 说吧 | 编辑模式已启动 |
| `edit-save` | `data: any` | 已保存的更改 |
| `edit-cancel` | \- 说吧 | 编辑模式已取消 |
| `key-change` | `event: { node: JsonNode, oldKey: string, newKey: string }` | 关键名称已更改 |
| `theme-change` | `theme: 'light' | 'dark'` | 主题已更改 |

## 数据结构

```typescript
interface JsonNode {
  key: string;
  value: any;
  type: "string" | "number" | "boolean" | "object" | "array" | "null";
  path: string[];
  level: number;
  expanded?: boolean;
  children?: JsonNode[];
}
```

## \* 样式和主题

该组件使用 **cSS 自定义属性** 对于主题,确保主题更改仅会影响JsonViewer组件,并且不会干扰您母应用程序的样式.

### 仅限主题

主题完全自成一体:

**动态主题图标**:主题按钮自动显示:

-   🌙 **月亮图标** 当在浅色主题( 单击以切换为暗色)
-   ☀️ **太阳图标** 暗主题时( 单击可切换为光)

```vue
<template>
  <JsonViewer 
    :theme="'dark'"  <!-- Theme only affects this component -->
    v-model:data="jsonData" 
  />
</template>
```

### CSS 自定义属性

您可以在组件范围内通过压倒这些 CSS 变量来自定义外观 :

```css
.json-viewer {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-color: #e2e8f0;
  --accent-color: #3b82f6;
  --hover-color: #f1f5f9;
  --success-color: #10b981;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
}
```

### 用于其他项目

当您在其它项目中使用此组件时, 主题将 **只影响组件本身**数字 :

```vue
<template>
  <div>
    <!-- This header won't be affected by theme changes -->
    <header class="my-app-header">
      <h1>My Application</h1>
    </header>
    
    <!-- Only this component will change theme -->
    <JsonViewer 
      :theme="componentTheme"
      v-model:data="jsonData"
      @theme-change="handleThemeChange"
    />
    
    <!-- This footer also won't be affected -->
    <footer class="my-app-footer">
      <p>My Application Footer</p>
    </footer>
  </div>
</template>

<script setup>
const componentTheme = ref('light');

const handleThemeChange = (newTheme) => {
  componentTheme.value = newTheme;
  // Theme only affects the JsonViewer component
  // Your app's global styling remains unchanged
};
</script>
```

**福利:**

-   ✅ **无全局侧面效果** - 主题更改只影响组件
-   ✅ **更好的封装** - 构成部分管理自身的外观
-   ✅ **简化一体化** - 与母项目的主题系统没有冲突
-   ✅ **可重复使用** - 可在任何项目中使用而不影响全球风格

## 发展

### 设置

```bash
# Clone the repository
git clone https://github.com/jeevan-lal/vue3-json-viewer.git

# Install dependencies
npm install

# Start development server
npm run dev
```

### 构建选项

```bash
# Build the library component (for npm publishing)
npm run build

# Build the demo app to ./preview folder
npm run build:demo

# Preview the built demo app
npm run preview
```

### 构建产出

-   **`npm run build`** • 创建 `dist/` 有库文件的文件夹 :
    
    -   `json-viewer.umd.js` -UMD捆绑
    -   `json-viewer.mjs` - ES模块捆绑
    -   `style.css` - 组件样式
-   **`npm run build:demo`** • 创建 `preview/` 有演示应用程序的文件夹 :
    
    -   `index.html` - 演示页
    -   `assets/` - 包装CSS和JavaScript

### 构建

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

### 林特

```bash
# Run ESLint
npm run lint

# Type check
npm run type-check
```

## 测试

运行测试套件 :

```bash
npm run test
```

## QQ 浏览器支持

-   铬 87
-   Firefox 第78页
-   萨法里 第14次
-   边缘 88

## 捐款

欢迎捐款! 请随意提交拉力请求.

1.  叉子存储器
2.  创建您的特性分支( E)`git checkout -b feature/AmazingFeature`(中文(简体) )
3.  提交更改( E)`git commit -m 'Add some AmazingFeature'`(中文(简体) )
4.  推向分行(`git push origin feature/AmazingFeature`(中文(简体) )
5.  打开拉请求

## 许可证

这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40ctechhindi/vue3-json-viewer/LICENSE) 详细文件.

## 承认

-   提供的图标 [赫罗伊孔斯](https://heroicons.com/)
-   字体家族 : [间](https://rsms.me/inter/) 财务报告和审定财务报表 [Fira 代码](https://github.com/tonsky/FiraCode)
-   与 [第3组](https://vuejs.org/) 财务报告和审定财务报表 [维特](https://vitejs.dev/)

## \* 解决问题

### 主题不起作用?

**问题**: 项目中无法显示的主题更改

**解决方案**:该组件现在只使用组件主题. 确保您正确传递主题道具:

```vue
<!-- ✅ Correct - Theme will work -->
<JsonViewer :theme="'dark'" v-model:data="jsonData" />

<!-- ❌ Incorrect - No theme prop -->
<JsonViewer v-model:data="jsonData" />
```

### 影响其他因素的主题?

**问题**: 影响整个应用程序的主题变化

**解决方案**这不应该再发生! 该部分现已完全自成一体. 如果你还遇到问题,请务必使用最新版本.

## ++ 辅助

如果您有任何问题或需要帮助,请:

1.  检查 [文档](https://npmcn.com/package/%40ctechhindi/vue3-json-viewer/#readme--usage)
2.  搜索 [现有问题](https://github.com/jeevan-lal/vue3-json-viewer/issues)
3.  创建一个 [新问题](https://github.com/jeevan-lal/vue3-json-viewer/issues/new)

* * *

由QQ和Vue 3制成

## 常见问题

### @ctechhindi/vue3-json-viewer 是什么？

具有树和文字模式的现代 Sleek Vue 3 JSON 查看器组件

### 如何安装 @ctechhindi/vue3-json-viewer？

在项目目录运行 npm install @ctechhindi/vue3-json-viewer，或使用 pnpm add / yarn add / bun add。

### @ctechhindi/vue3-json-viewer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ctechhindi/vue3-json-viewer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ctechhindi/vue3-json-viewer 可以商用吗？

@ctechhindi/vue3-json-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ctechhindi/vue3-json-viewer 的下载量有多少？

根据 npm 官方下载统计，@ctechhindi/vue3-json-viewer 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,627 次，日均约 88 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ctechhindi/vue3-json-viewer 还在维护吗？

最新版本 1\.0\.5 发布于 2025/08/16（1\.2 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/08/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。