Vue中使用JsonView来展示Json树的实例代码
(编辑:jimmy 日期: 2024/11/1 浏览:3 次 )
前两天干活儿有个需求,在前端需要展示可折叠的Json树,供开发人员查看,这里采用JsonView组件来实现,它是一款用于展示Json的Vue组件,支持大体积的Json文件快速解析渲染,下面记录一下实现过程。
1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下:
<template> <div class="bgView"> <div :class="['json-view', length " :style="'font-size:' + fontSize+'px'"> <span @click="toggleClose" :class="['angle', innerclosed " 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 "json-note"> {{innerclosed "!length">{{isArray "!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 "!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 ""; 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页面中引用JsonView组件
import JsonView from '@/components/JsonView'
3.定义Json数据变量
jsonData:{},
4.页面展示代码
<JsonView :json="jsonData"></JsonView>
5.实现效果如下:
JsonViewAttributes
下一篇:Vue 数据绑定的原理分析