Vue中使用JsonView来展示Json树的实例代码


Posted in Javascript onNovember 16, 2020

前两天干活儿有个需求,在前端需要展示可折叠的Json树,供开发人员查看,这里采用JsonView组件来实现,它是一款用于展示Json的Vue组件,支持大体积的Json文件快速解析渲染,下面记录一下实现过程。

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页面中引用JsonView组件

import JsonView from '@/components/JsonView'

3.定义Json数据变量

jsonData:{},

4.页面展示代码

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

5.实现效果如下:

Vue中使用JsonView来展示Json树的实例代码

JsonViewAttributes

Vue中使用JsonView来展示Json树的实例代码

到此这篇关于Vue之使用JsonView来展示Json树的文章就介绍到这了,更多相关Vue使用JsonView展示Json树内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
JS回调函数深入理解
Oct 16 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
小程序自定义弹框效果
Nov 16 #Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
You might like
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
面试题:react和vue的区别分析
2019/04/08 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
雷蛇美国官网:Razer
2020/04/03 全球购物
Final类有什么特点
2012/04/25 面试题
电子商务个人自荐信
2013/12/12 职场文书
教学大赛获奖感言
2014/01/15 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
工商干部先进事迹
2014/05/14 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
奖励申请报告范文
2015/05/15 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
详细总结Python常见的安全问题
2021/05/21 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS