feat: json-preview组件
This commit is contained in:
parent
b3d00730e9
commit
7fa27837d2
@ -52,6 +52,7 @@
|
|||||||
"pinia": "2.2.2",
|
"pinia": "2.2.2",
|
||||||
"tinymce": "^7.3.0",
|
"tinymce": "^7.3.0",
|
||||||
"vue": "^3.5.3",
|
"vue": "^3.5.3",
|
||||||
|
"vue-json-pretty": "^2.4.0",
|
||||||
"vue-router": "^4.4.3"
|
"vue-router": "^4.4.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
5
apps/web-antd/src/components/code-editor/index.ts
Normal file
5
apps/web-antd/src/components/code-editor/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { withInstall } from '#/utils';
|
||||||
|
|
||||||
|
import jsonPreview from './src/json-preview/json-preview.vue';
|
||||||
|
|
||||||
|
export const JsonPreview = withInstall(jsonPreview);
|
@ -0,0 +1,19 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import VueJsonPretty from 'vue-json-pretty';
|
||||||
|
|
||||||
|
import 'vue-json-pretty/lib/styles.css';
|
||||||
|
|
||||||
|
defineProps<{ data: any }>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VueJsonPretty :data="data" :deep="3" :show-length="true" path="res" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
html[class='dark'] {
|
||||||
|
.vjs-tree-node:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,9 +1,24 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import CommonSkeleton from '#/views/common';
|
import { Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Card } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { JsonPreview } from '#/components/code-editor';
|
||||||
|
|
||||||
|
const obj = {
|
||||||
|
address: {
|
||||||
|
a: 1,
|
||||||
|
b: true,
|
||||||
|
},
|
||||||
|
age: 1234,
|
||||||
|
name: 'ruoyi-plus',
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Page>
|
||||||
<CommonSkeleton />
|
<Card title="json预览">
|
||||||
</div>
|
<JsonPreview :data="obj" />
|
||||||
|
</Card>
|
||||||
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
672
pnpm-lock.yaml
672
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user