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="&nbsp;"
        />
        <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 + '&nbsp;&nbsp;'"
      />
        <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 + '&nbsp;&nbsp;'"
      />
      <template v-if="index + 1 < propertyCount">,</template><br>
    </template>{{space}}&nbsp;}
  </template>
  <!--基础类型-->
  <template v-else>
    {{showBytype(value)}}
  </template>

key 首先这个key就比较烦，数组循环的时候，会把下标作为key穿进去，这个就要做判断。
value 然后要判断value的类型，数组、对象、基础类型。

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

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

看看效果

基础类型

多层多类型

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

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

json格式化显示的问题

外壳 + 递归

外壳

递归