json格式化显示的问题
做组件属性的管理小工具的时候，遇到一个小问题，就是json的格式化显示的问题。
一个对象直接用{{}}来显示的话，会输出紧凑型的json，这个嘛明显不好看呀。
我知道网上有很多json格式化的js函数，拿过来用就可以，但是我还是想用组件的递归的方式来实现，就算是练练手吧，以后做组织架构的时候，说不定还会用到，或者直接用UI库提供的方式。
外壳 + 递归
一开始尝试了一种方式，弄来弄去比较乱，放弃了。
后来改成简单的两个组件，一个组件是外壳，负责入口，另一个组件负责递归，也就是显示格式化的json的属性。
外壳
外壳比较简单，组一个遍历把属性循环出来，交给递归组件。
<!--外壳-->
<div style="margin: 5px">
<el-radio-group v-model="jsonType" size="mini">
<el-radio-button :label="1">js</el-radio-button>
<el-radio-button :label="2">json</el-radio-button>
</el-radio-group>
</div>
<el-card class="box-card" contenteditable="true">
<!--开头-->
<template v-if="jsonType === 1">
const props_{{json.colName}} = reactive({
</template>
<template v-if="jsonType === 2">
"{{json.controlId}}": {
</template>
<div
class="text item"
v-for="(value, key, index) in json"
:key="'jsonformat_' + index"
>
<json-format-item
:mykey="key"
:value="value"
:jsonType="jsonType"
:isArray="valueIsArray(value)"
space=" "
/>
<template v-if="index + 1 < propertyCount">,</template>
</div>
<!--结尾-->
<template v-if="jsonType === 1">
})
</template>
<template v-if="jsonType === 2">
}
</template>
</el-card>
- el-card 做个外框，据说有阴影效果。
- contenteditable="true" 可以编辑，当然不是做编辑的响应了，只是赋值的时候方便选择。
- 对象还是数组？
最外层的json只有两种类型，一个是对象，用大括号套起来，一个是数组，用中括号套起来，所以外层要做个判断。 - index + 1 < propertyCount
处理最后一个逗号的问题 - space 负责缩进显示
- jsonType 输出json文件格式，还是js代码形式，因为前者的key要用双引号括起来，而后者可以不用。
外框基本就是这样了，比较简单。
递归
这个就比较饶了，各种情况的判断，各种尝试。
<!--key 的格式化，判断是不是数组-->
<template v-if="!isArray || valueIsArray(value)">
<template v-if="jsonType === 1">
{{space}}{{mykey}}:
</template>
<template v-if="jsonType === 2">
{{space}}{{mykey}}":
</template>
</template>
<!--array 的格式化-->
<template v-if="valueIsArray(value)">[<br>
<template
v-for="(value1, key1) in value"
:key="'jsonformatitem_' + key1"
>
{{space}}<json-format-item
:isArray="true"
:mykey="key1"
:value="value1"
:jsonType="jsonType"
:space="space + ' '"
/>
<template v-if="key1 + 1 < value.length">,<br></template>
</template>
<br>{{space}}]
</template>
<!--object 的格式化-->
<template v-else-if="typeof value === 'object'">
<template v-if="isArray">{{space}}</template>{<br>
<template
v-for="(value1, key1, index) in value"
:key="'jsonformatitem_' + index"
>
{{space}}<json-format-item
:isArray="false"
:mykey="key1"
:value="value1"
:jsonType="jsonType"
:space="space + ' '"
/>
<template v-if="index + 1 < propertyCount">,</template><br>
</template>{{space}} }
</template>
<!--基础类型-->
<template v-else>
{{showBytype(value)}}
</template>
key
首先这个key就比较烦，数组循环的时候，会把下标作为key穿进去，这个就要做判断。value
然后要判断value的类型，数组、对象、基础类型。
基础类型就好办了，显示，结束递归。
如果是数组或者对象的话，还要进行遍历，然后再调用 递归组件进行显示。
因为基础类型是递归出口，所以不会造成死循环。
剩下的就不说了，头有点疼。
看看效果
基础类型
数组
多层多类型
还有一些细节需要调整，不过可以先凑合用了。
