快捷導(dǎo)航

Vue中使用JsonView來(lái)展示Json樹(shù)的實(shí)例代碼

更新時(shí)間：2020年11月16日 09:46:17 作者：愛(ài)懶懶的小景景

這篇文章主要介紹了Vue之使用JsonView來(lái)展示Json樹(shù)的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前兩天干活兒有個(gè)需求，在前端需要展示可折疊的Json樹(shù)，供開(kāi)發(fā)人員查看，這里采用JsonView組件來(lái)實(shí)現(xiàn)，它是一款用于展示Json的Vue組件，支持大體積的Json文件快速解析渲染，下面記錄一下實(shí)現(xiàn)過(guò)程。

1.首先先下載好JsonView的組件：JsonView.vue，組件代碼如下：

<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: 13
   }
  },
  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>
 .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;
 }

 .json-body .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;
 }

 .angle::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;
 }

 .angle.closed::after {
  border-left: solid 4px #333;
  border-top: solid 6px transparent;
  border-bottom: solid 6px transparent;
 }
</style>

2.在需要使用的vue頁(yè)面中引用JsonView組件

import JsonView from '@/components/JsonView'

3.定義Json數(shù)據(jù)變量

jsonData:{},

4.頁(yè)面展示代碼

<JsonView :json="jsonData"></JsonView>

5.實(shí)現(xiàn)效果如下：

JsonViewAttributes

到此這篇關(guān)于Vue之使用JsonView來(lái)展示Json樹(shù)的文章就介紹到這了,更多相關(guān)Vue使用JsonView展示Json樹(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: