IndexPage.vue

<!--
 * @FileDescription: JSON 预览
 * @Date: 2023-05-16
 * @LastEditTime: 2023-05-16
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { ComJsonView } from 'src/components';

const state = reactive({
  data: {
    name: '张三',
    age: 28,
    isShow: true,
    money: null,
    www: undefined,
    children: [
      { name: '孩子1', age: 3 },
      { name: '孩子2', age: 1 },
      '这是一句字符串',
      100,
      ['1F', '2F', { name: '李四' }],
      '珠穆朗玛峰',
    ],
    sex: '男',
    data: [
      { name: '张三', age: 18 },
      { name: '李四', age: 28 },
    ],
  } as any,
});

onMounted(() => {
  console.log('数据', state.data);
});
</script>
<template>
  <div>{{ JSON.stringify(state.data) }}</div>
  <br />
  <div class="box">
    <ComJsonView :data="state.data" />
  </div>
  <br />
</template>

<style lang="scss" scoped>
.box {
  width: 500px;
  padding: $padding-md;
  margin-left: 40px;
  border: 1px solid rgba(0, 0, 0, 0.562);
}
</style>