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

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

版本：0\.6\.0
npm 元数据更新时间：2026-07-16T04:56:31.660Z
中文译文更新时间：2026-11-06T16:17:44.559Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：160 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue ^3\.3\.0
- 首次发布：2024-10-23T09:18:55.106Z
- 最新版本发布：2026-07-16T04:56:31.527Z
- 近 30 天下载量：2760（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 5 个）

## 中文简介

一个美丽的,自定义的JSON取景器组件,用于Vue 3,有TypeScript支持,暗/光模式,扩展/拼接控制,和语法突出化.

## 安装

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

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

## README

# Vue 3 JSON 查看器

这个插件提供了一个Vue 3组件,用于以有条理和视觉吸引力的方式渲染并和JSON数据互动. 它支持黑模式等特征,扩张和倒塌的巢状物体,以及更多.

## 特征

-   **黑暗模式**:在光和暗的主题之间切换,以提高能见度.
-   **可扩展/可缩放对象**: 方便地管理深层嵌入数据的能见度.
-   **可续用性**:自定义取景器使用道具用于各种用例.
-   **高度可配置**:控制扩展状态,暗模式,和数据渲染.

## 演示

![Vue3 JSON Viewer Demo](https://npmcn.com/package/%40anilkumarthakur/vue3-json-viewer/public/images/demo.png)

## 安装

使用您的首选软件包管理器安装软件包 :

```bash
# For npm
npm install @anilkumarthakur/vue3-json-viewer

# For yarn
yarn add @anilkumarthakur/vue3-json-viewer

# For bun
bun add @anilkumarthakur/vue3-json-viewer

# For pnpm
pnpm add @anilkumarthakur/vue3-json-viewer
```

## 设置

导入和使用 `JsonViewer` vue 3 应用程序中的组件 :

1.  **导入样式表**  
    确保导入您组件中的样式或全球样式 :
    
    ```typescript
    import '@anilkumarthakur/vue3-json-viewer/styles.css';
    ```
    
2.  **使用 `JsonViewer` 构成部分**
    
    ```vue
    <script setup lang="ts">
      import { computed, ref } from 'vue';
      import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';
    
      // Sample JSON data to display
      const jsonData = {
        name: 'John Doe',
        age: 30,
        isActive: true,
        hobbies: ['reading', 'traveling', 'coding'],
        address: {
          street: '123 Main St',
          city: 'New York',
          coordinates: { latitude: 40.7128, longitude: -74.006 },
        },
        deepNestedObject: {
          level1: { level2: { level3: { level4: { deepKey: 'deep value' } } } },
        },
      };
    
      const isDarkMode = ref(true);
      const toggleDarkMode = () => (isDarkMode.value = !isDarkMode.value);
    
      const isExpanded = ref(true);
      const toggleExpanded = () => (isExpanded.value = !isExpanded.value);
    
      const computedExpanded = computed(() =>
        isExpanded.value ? 'expanded' : 'collapsed',
      );
    </script>
    
    <template>
      <button @click="toggleDarkMode">Toggle Dark Mode</button>
      <button @click="toggleExpanded">Toggle Expanded</button>
      <JsonViewer
        :data="jsonData"
        :expanded="isExpanded"
        :darkMode="isDarkMode"
        :key="computedExpanded"
      />
    </template>
    ```
    

## 道具

这个 `JsonViewer` 组件提供几种定制道具:

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `data` | 对象 | `{}` | JSON数据要发布. |
| `expanded` | 布尔 | `true` | 默认是否扩展所有对象/阵列 . |
| `darkMode` | 布尔 | `false` | 为 JSON 查看器启用暗模式 . |
| `level` | 数目 | `0` | 开始渲染 JSON 对象的深度级别 . |

## 方法

您可以使用您 Vue 组件中的方法来动态控制查看器 :

-   **`toggleDarkMode`**:在光和暗的主题之间切换.
-   **`toggleExpanded`**: 展开或崩溃所有对象/阵列.

## 示例 JSON 数据结构

以下是JSON数据类型的例子,你可以使用 `JsonViewer` 组件 :

```javascript
const jsonData = {
  name: 'John Doe',
  age: 30,
  isActive: true,
  isVerified: false,
  hobbies: ['reading', 'traveling', 'swimming', 'coding'],
  items: [
    {
      property1: 'value',
      property2: 'value2',
      property3: 'value3',
    },
    {
      property1: 'value',
      property2: 'value2',
      property3: 'value3',
    },
  ],
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY',
    zipCode: '10001',
    coordinates: {
      latitude: 40.7128,
      longitude: -74.006,
    },
  },
  mixedArray: [1, 2, 3, 'test', { property: 'value' }],
  temperature: -2.757,
  currentDate: new Date(),
  regexPattern: /[0-9]/gi,
  formattedDate: Moment().format('YYYY-MM-DD'),
  emptyObj: {},
  emptyArr: [],
  emptyStr: '',
  zeroValue: 0,
  nullValue: null,
  undefinedValue: undefined,
  deepNestedObject: {
    level1: {
      level2: {
        level3: {
          level4: {
            level5: {
              deepKey: 'deep value',
            },
          },
        },
      },
    },
  },
  sampleFunction: function () {
    return 'This is a function';
  },
};
```

## 演示

现场演示,看看 [vercel上的例子](https://vue3-json-viewer.vercel.app/) 或探索演示 `src/App.vue` 数据库.

## 类型脚本支持

这个 `JsonViewer` 组件已全部输入,从而更容易在 TypeScript 项目中工作.

在您的 Vue 3 应用程序中享受无缝和可定制的 JSON 浏览体验 `@anilkumarthakur/vue3-json-viewer`

## 常见问题

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

一个美丽的,自定义的JSON取景器组件,用于Vue 3,有TypeScript支持,暗/光模式,扩展/拼接控制,和语法突出化\.

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

在项目目录运行 npm install @anilkumarthakur/vue3-json-viewer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

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

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

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

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

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