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的类型，数组、对象、基础类型。
基础类型就好办了，显示，结束递归。 如果是数组或者对象的话，还要进行遍历，然后再调用 递归组件进行显示。 因为基础类型是递归出口，所以不会造成死循环。
剩下的就不说了，头有点疼。
看看效果
还有一些细节需要调整，不过可以先凑合用了。
