Vue 3 JSON 查看器

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

解析页面

* 特性

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

* 安装

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

@ctechhindi/vue3-json-查看器

npm install @ctechhindi/vue3-json-viewer

或用纱线:

yarn add @ctechhindi/vue3-json-viewer

使用量

CSS 导入( 需要)

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

// 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";

基本用途

<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>

高级使用

<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 元素 :

<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>

最小配置

最小, 仅读取的查看器 :

<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 软件

UI 可见道具

活动

数据结构

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

* 样式和主题

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

仅限主题

主题完全自成一体:

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

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

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

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;
}

用于其他项目

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

<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>

福利:

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

发展

设置

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

# Install dependencies
npm install

# Start development server
npm run dev

构建选项

# 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

构建

# Build for production
npm run build

# Preview production build
npm run preview

林特

# Run ESLint
npm run lint

# Type check
npm run type-check

测试

运行测试套件 :

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. 打开拉请求

许可证

这个项目根据麻省理工学院许可证颁发——见 自由主义 详细文件.

承认

• 提供的图标 赫罗伊孔斯
• 字体家族 : 间 财务报告和审定财务报表 Fira 代码
• 与 第3组 财务报告和审定财务报表 维特

* 解决问题

主题不起作用?

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

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

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

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

影响其他因素的主题?

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

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

++ 辅助

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

1. 检查 文档
2. 搜索 现有问题
3. 创建一个 新问题

由QQ和Vue 3制成