增加replacer属性方便自定义序列化json对象

example/Basic.vue

@@ -102,6 +102,7 @@
             ? state.useRenderNodeActionsSlot
             : undefined
         "
+        :replacer="replacer"
         style="position: relative"
       >
         <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
@@ -133,7 +134,7 @@
 <script>
 import { defineComponent, reactive, watch } from 'vue';
 import { useDarkMode } from './useDarkMode';
-import VueJsonPretty from 'src';
+import VueJsonPretty, { defaultReplacer } from 'src';
 
 const defaultData = {
   status: 200,
@@ -204,12 +205,22 @@ export default defineComponent({
       },
     );
 
+    function replacer(key, value) {
+      if(value && typeof value === 'object') {
+        if(value.news_id === 51184) {
+          return ['number', 51184]
+        }
+      }
+      return defaultReplacer(key, value);
+    }
+
     return {
       state,
       pathCollapsible,
       localDarkMode,
       toggleLocalDarkMode,
       globalDarkModeState,
+      replacer,
     };
   },
 });

src/components/Tree/index.tsx

@@ -70,6 +70,9 @@ export default defineComponent({
       type: String as PropType<'light' | 'dark'>,
       default: 'light',
     },
+    replacer: {
+      type: Function as PropType<(key?: string | symbol, value?: unknown) => [string, unknown]>,
+    },
   },
 
   slots: ['renderNodeKey', 'renderNodeValue', 'renderNodeActions'],
@@ -87,7 +90,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const treeRef = ref<HTMLElement>();
 
-    const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath));
+    const originFlatData = computed(() => jsonFlatten(props.data, props.rootPath, 0, void 0, props.replacer));
 
     const initHiddenPaths = (deep: number, collapsedNodeLength: number) => {
       return originFlatData.value.reduce((acc, item) => {
@@ -195,6 +198,7 @@ export default defineComponent({
             ...startHiddenItem,
             showComma: item.showComma,
             content: isObject ? '{...}' : '[...]',
+            contentDataType: 'string',
             type: isObject ? 'objectCollapsed' : 'arrayCollapsed',
           } as NodeDataType;
           startHiddenItem = null;

src/components/TreeNode/index.tsx

@@ -149,7 +149,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit }) {
-    const dataType = computed<string>(() => getDataType(props.node.content));
+    const dataType = computed<string>(() => props.node.contentDataType);
 
     const valueClass = computed(() => `vjs-value vjs-value-${dataType.value}`);
 

src/index.ts

@@ -1,4 +1,6 @@
 import { Plugin } from 'vue';
 import Tree from './components/Tree';
 
+export { getDataType, defaultReplacer } from './utils/index'
+
 export default Tree as typeof Tree & Plugin;

src/utils/index.ts

@@ -17,6 +17,7 @@ export type JSONDataType = string | number | boolean | unknown[] | Record<string
 
 export interface JSONFlattenReturnType extends JSONFlattenOptions {
   content: string | number | null | boolean;
+  contentDataType: string;
   level: number;
   path: string;
 }
@@ -29,11 +30,17 @@ export function getDataType(value: unknown): string {
   return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
 }
 
+export function defaultReplacer(key?: string | symbol, value?: unknown): [string, unknown] {
+  const dataType = getDataType(value);
+  return [dataType, value];
+}
+
 export function jsonFlatten(
-  data: JSONDataType,
+  dataInput: JSONDataType,
   path = 'root',
   level = 0,
   options?: JSONFlattenOptions,
+  replacer = defaultReplacer
 ): JSONFlattenReturnType[] {
   const {
     key,
@@ -42,7 +49,7 @@ export function jsonFlatten(
     showComma = false,
     length = 1,
   } = options || ({} as JSONFlattenOptions);
-  const dataType = getDataType(data);
+  const [dataType, data] = replacer(key, dataInput);
 
   if (dataType === 'array') {
     const inner = arrFlat(
@@ -52,7 +59,7 @@ export function jsonFlatten(
           showComma: idx !== arr.length - 1,
           length,
           type,
-        }),
+        }, replacer),
       ),
     ) as JSONFlattenReturnType[];
     return [
@@ -61,14 +68,14 @@ export function jsonFlatten(
         key,
         length: (data as unknown[]).length,
         type: 'arrayStart',
-      })[0],
+      }, replacer)[0],
     ].concat(
       inner,
       jsonFlatten(']', path, level, {
         showComma,
         length: (data as unknown[]).length,
         type: 'arrayEnd',
-      })[0],
+      }, replacer)[0],
     );
   } else if (dataType === 'object') {
     const keys = Object.keys(data as Record<string, JSONDataType>);
@@ -84,6 +91,7 @@ export function jsonFlatten(
             length,
             type,
           },
+          replacer,
         ),
       ),
     ) as JSONFlattenReturnType[];
@@ -94,16 +102,17 @@ export function jsonFlatten(
         index,
         length: keys.length,
         type: 'objectStart',
-      })[0],
+      }, replacer)[0],
     ].concat(
       inner,
-      jsonFlatten('}', path, level, { showComma, length: keys.length, type: 'objectEnd' })[0],
+      jsonFlatten('}', path, level, { showComma, length: keys.length, type: 'objectEnd' }, replacer)[0],
     );
   }
 
   return [
     {
       content: data as JSONFlattenReturnType['content'],
+      contentDataType: dataType,
       level,
       key,
       index,