Vue 3 JSON 查看器

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

特征

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

演示

安装

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

# 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. 导入样式表
   确保导入您组件中的样式或全球样式 :

   import '@anilkumarthakur/vue3-json-viewer/styles.css';
   

2. 使用 JsonViewer 构成部分

   <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 组件提供几种定制道具:

方法

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

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

示例 JSON 数据结构

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

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上的例子 或探索演示 src/App.vue 数据库.

类型脚本支持

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

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