展示 JSON 数据

TIP

GitHub 地址： https://github.com/leezng/vue-json-pretty

安装依赖：

pnpm i vue-json-pretty

创建组件

<script lang="ts" setup>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

const props = defineProps({
  data: { type: Object }, // 要展示的json数据
  showLineNumber: { type: Boolean, default: false }, // 显示行号
  showLength: { type: Boolean, default: true }, // 显示缩进线
  showIcon: { type: Boolean, default: true }, // 显示折叠按钮
  deep: { type: Number, default: 2 },
})
</script>

<script lang="ts">
export default {
  name: 'VueJson',
}
</script>

<template>
  <VueJsonPretty
    :show-line-number="showLineNumber"
    :show-length="showLength"
    :show-icon="showIcon"
    :data="data"
  />
</template>

<style scoped>
:deep(.vjs-tree-node:hover) {
  background-color: rgba(125, 125, 125, 0.3);
}
</style>

使用

<script setup lang="ts">
import VueJson from './components/VueJson.vue'

const data = {
  compilerOptions: {
    target: 'ESNext',
    useDefineForClassFields: true,
    module: 'ESNext',
    moduleResolution: 'Node',
    strict: true,
    jsx: 'preserve',
    sourceMap: true,
    resolveJsonModule: true,
    isolatedModules: true,
    esModuleInterop: true,
    lib: ['ESNext', 'DOM'],
    skipLibCheck: true,
  },
  include: ['src/**/*.ts', 'src/**/*.d.ts', 'src/**/*.tsx', 'src/**/*.vue'],
  references: [{ path: './tsconfig.node.json' }],
}
</script>

<template>
  <div>
    <VueJson :data="data" />
  </div>
</template>

<style scoped></style>

props

prop	介绍	数据类型	默认值
data	json 数据	Object
showLineNumber	显示行号	Boolean	false
showLength	显示缩进线	Boolean	true
showIcon	显示折叠按钮	Boolean	true
deep	大于此深度的路径将被折叠	Number	2