vue3安装vue3-json-viewer

vue3安装vue3-json-viewer

🌈 官方文档

效果图

安装

npm i vue3-json-viewer@2.2.2

提醒

2.1.0以下版本需要依赖clipboard

2.1.0以上版本不需要依赖clipboard

使用

<script lang="ts" setup>
import { ref, reactive, inject, onMounted, nextTick } from "vue";

  

import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";

const obj = {
  name: "qiu",
  age: 18,
  isMan: false,
  date: new Date(),
  fn: () => { },
  arr: [1, 2, 5]
};

const jsonData = reactive(obj);

</script>

<template>
  <div>
    <JsonViewer :value="jsonData" copyable boxed sort />
  </div>
</template>

<style scoped>
:deep(.jv-container .jv-code.boxed) {
  max-height: 420px;
}

:deep(.jv-container .jv-code) {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
</style>

属性

属性	描述	默认值	是否必填
value	json数据源		✅
copyable	复制按钮	false	❌
boxed	卡片风格	false	❌
sort	排序	false	❌
theme	主题	light（light || dark）	❌
expandDepth	展开层数	1	❌
expanded	自动展开	false	❌

事件

事件	描述	回调值
onKeyClick	点击key触发	被点击key

添加ts支持（可选）

在项目src目录下创建vue3-json-viewer.d.ts

declare module 'vue3-json-viewer' {
    import { AllowedComponentProps, App, Component, ComponentCustomProps, VNodeProps } from 'vue'
    interface JsonViewerProps {
        value: Object | Array<any> | string | number | boolean; //对象
        expanded: boolean; //是否自动展开
        expandDepth: number; //展开层级
        copyable: boolean | object; //是否可复制
        sort: boolean;//是否排序
        boxed: boolean;//是否boxed
        theme: string;//主题 dark | light
        previewMode: boolean;//是否可复制
        timeformat: (value: any) => string
    }
    type JsonViewerType = JsonViewerProps & VNodeProps & AllowedComponentProps & ComponentCustomProps
    const JsonViewer: Component<JsonViewerType>
    export { JsonViewer }
    const def: { install: (app: App) => void }
    export default def
}