Vue组件（20）用递归的组件实现json的格式化

json格式化显示的问题

做组件属性的管理小工具的时候，遇到一个小问题，就是json的格式化显示的问题。
一个对象直接用{{}}来显示的话，会输出紧凑型的json，这个嘛明显不好看呀。

我知道网上有很多json格式化的js函数，拿过来用就可以，但是我还是想用组件的递归的方式来实现，就算是练练手吧，以后做组织架构的时候，说不定还会用到，或者直接用UI库提供的方式。

外壳 + 递归

一开始尝试了一种方式，弄来弄去比较乱，放弃了。
后来改成简单的两个组件，一个组件是外壳，负责入口，另一个组件负责递归，也就是显示格式化的json的属性。

外壳

外壳比较简单，组一个遍历把属性循环出来，交给递归组件。

  
  

    
      js
      json
    
  
  
    
    
    
    

      
        
    
    
    
    
  

• el-card 做个外框，据说有阴影效果。
• contenteditable="true" 可以编辑，当然不是做编辑的响应了，只是赋值的时候方便选择。
• 对象还是数组？
  最外层的json只有两种类型，一个是对象，用大括号套起来，一个是数组，用中括号套起来，所以外层要做个判断。
• index + 1 < propertyCount
  处理最后一个逗号的问题
• space 负责缩进显示
• jsonType 输出json文件格式，还是js代码形式，因为前者的key要用双引号括起来，而后者可以不用。

外框基本就是这样了，比较简单。

递归

这个就比较饶了，各种情况的判断，各种尝试。

• key
  首先这个key就比较烦，数组循环的时候，会把下标作为key穿进去，这个就要做判断。

• value
  然后要判断value的类型，数组、对象、基础类型。
  基础类型就好办了，显示，结束递归。
  如果是数组或者对象的话，还要进行遍历，然后再调用 递归组件进行显示。
  因为基础类型是递归出口，所以不会造成死循环。

剩下的就不说了，头有点疼。

看看效果

基础类型

数组

多层多类型

还有一些细节需要调整，不过可以先凑合用了。