当前位置 博文首页 > 你是人间四月天：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:
