<!-- * @FileDescription: JSON 文本 预览组件 * @Date: 2023-05-29 * @LastEditTime: 2023-05-29 --> <script setup lang="ts"> interface IDetailProps { data: any; isLast?: boolean; mainColor?: string; objSideColor?: string; arrSideColor?: string; stringColor?: string; numberColor?: string; booleanColor?: string; nullColor?: string; otherColor?: string; } const props = withDefaults(defineProps<IDetailProps>(), { data: () => { return {}; }, isLast: true, }); function htmlTranslate(value: any) { const typeofs = Object.prototype.toString.call(value); if (typeofs === '[object String]') { return `"${value}"`; } else if (typeofs === '[object Null]') { return 'null'; } else { return value; } } function getColor(value: any) { const typeofs = Object.prototype.toString.call(value); switch (typeofs) { case '[object Number]': return props.numberColor; // NaN Infinity 也是Number类型 case '[object String]': return props.stringColor; case '[object Boolean]': return props.booleanColor; case '[object Null]': return props.nullColor; default: return props.otherColor; } } </script> <template> <span style="font-family: 'Gill Sans', sans-serif"> <span :style="{ color: getColor(props.data) }"> {{ htmlTranslate(props.data) }}</span > <span v-if="!props.isLast" :style="{ color: mainColor }"> ,</span> </span> </template> <style lang="scss" scoped></style>