Vue JsonView 树形格式化代码插件

本群面相web开发爱好者以及同行，共同探讨研究技术，分享交流经验，帮助新人成长，大牛技术精进，js发展日新月异闭门造车是没有出路的，有问必答，共同进步。求职招聘qq群 626448857 附：web开发资料群 935069904

组件代码

<template>
  <div class="bgView">
    <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'">
    <span @click="toggleClose" :class="['angle', innerclosed ? 'closed' : '']" v-if="length"></span>
    <div class="content-wrap">
      <p class="first-line">
        <span v-if="jsonKey" class="json-key">"{{jsonKey}}": </span>
        <span v-if="length">
          {{prefix}}
          {{innerclosed ? ('...' + subfix) : ''}}
          <span  class="json-note">
           {{innerclosed ? (' // count: ' + length) : ''}}
          </span>
        </span>
        <span v-if="!length">{{isArray ? '[]' : '{}'}}</span>
      </p>
      <div v-if="!innerclosed && length" class="json-body">
        <template v-for="(item, index) in items">
          <json-view :closed="closed" v-if="item.isJSON" :key="index" :json="item.value" :jsonKey="item.key"
                     :isLast="index === items.length - 1"></json-view>
          <p class="json-item" v-else :key="index">
            <span class="json-key">
                {{(isArray ? '' : '"' + item.key + '"')}}
            </span>
            :
            <span class="json-value">
                {{item.value + (index ===
            items.length - 1 ? '' : ',')}}
            </span>

          </p>
        </template>
        <span v-show="!innerclosed" class="body-line"></span>
      </div>
      <p v-if="!innerclosed && length" class="last-line">
        <span>{{subfix}}</span>
      </p>
    </div>
  </div>
  </div>
</template>

<script>
  export default {
    name: 'jsonView',
    props: {
      json: [Object, Array],
      jsonKey: {
        type: String,
        default: ''
      },
      closed: {
        type: Boolean,
        default: false
      },
      isLast: {
        type: Boolean,
        default: true
      },
      fontSize: {
        type: Number,
        default: 18
      }
    },
    created() {
      this.innerclosed = this.closed
      this.$watch('closed', () => {
        this.innerclosed = this.closed
      })
    },
    data() {
      return {
        innerclosed: true
      }
    },
    methods: {
      isObjectOrArray(source) {
        const type = Object.prototype.toString.call(source)
        const res = type === '[object Array]' || type === '[object Object]'
        return res
      },
      toggleClose() {
        if (this.innerclosed) {
          this.innerclosed = false
        } else {
          this.innerclosed = true
        }
      }
    },
    computed: {
      isArray() {
        return Object.prototype.toString.call(this.json) === '[object Array]'
      },
      length() {
        return this.isArray ? this.json.length : Object.keys(this.json).length
      },
      subfix() {
        return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',')
      },
      prefix() {
        return this.isArray ? '[' : '{'
      },
      items() {
        if (this.isArray) {
          return this.json.map(item => {
            const isJSON = this.isObjectOrArray(item)
            return {
              value: isJSON ? item : JSON.stringify(item),
              isJSON,
              key: ''
            }
          })
        }
        const json = this.json
        return Object.keys(json).map(key => {
          const item = json[key]
          const isJSON = this.isObjectOrArray(item)
          return {
            value: isJSON ? item : JSON.stringify(item),
            isJSON,
            key
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .bgView {
    background-color: #fafafa;
  }
  .json-view {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    padding-left: 20px;
    box-sizing: border-box;
    .json-note {
      color: #909399;
    }
    .json-key {
      color: rgb(147, 98, 15);
    }
    .json-value {
      color: rgb(24, 186, 24);
    }
    .json-item {
      margin: 0;
      padding-left: 20px;

    }
    .first-line {
      padding: 0;
      margin: 0;
    }
    .json-body {
      position: relative;
      padding: 0;
      margin: 0;

      .body-line {
        position: absolute;
        height: 100%;
        width: 0;
        border-left: dashed 1px #bbb;
        top: 0;
        left: 2px;
      }
    }
    .last-line {
      padding: 0;
      margin: 0;
    }
    .angle {
      position: absolute;
      display: block;
      cursor: pointer;
      float: left;
      width: 20px;
      text-align: center;
      left: 0;

      &::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        vertical-align: middle;
        border-top: solid 4px #333;
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
      }
      &.closed::after {
        border-left: solid 4px #333;
        border-top: solid 6px transparent;
        border-bottom: solid 6px transparent;
      }
    }
  }
</style>

使用实例

<template>
  <div>
    <JsonView :json="JsonData"></JsonView>
  </div>
</template>

<script>
  import JsonView from '@/components/JsonView'

  export default {
    name: 'test',
    data() {
      return {
        JsonData: {
          'code': 200,
          'message': 'succeed !',
          'data': [
            {
              'uuid': '76254DDB-A8EA-46CB-B3D7-6EEBD13BB2E6',
              'version': 1,
              'code': '401',
              'message': '请求无权限',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'B0415CC2-F0E0-4B0C-A3BA-50ABAEE98BB9',
              'version': 1,
              'code': '500',
              'message': '服务器错误',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'B70692E0-CCB7-4C44-B59B-7B75B16FA9FE',
              'version': 1,
              'code': '200',
              'message': '请求成功',
              'createId': 'dev',
              'createDate': '2018-12-03T15:06:54.717',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'C8A37C2D-0842-423B-AEBA-976C106A3E90',
              'version': 1,
              'code': '202',
              'message': '请求失败',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            }
          ]
        }
      }
    },
    components: { JsonView }
  }
</script>

可传参数:

json: [Object, Array], // 必传 显示的数据
      closed: { // 是否默认展开
        type: Boolean,
        default: false
      },
      fontSize: { // 文字大小
        type: Number,
        default: 18
      }

详情