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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
Vant picker 多级联动操作
Nov 02 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实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
下载给定网页上图片的方法
2014/02/18 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
运动会通讯稿50字
2014/01/30 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
邹越演讲观后感
2015/06/15 职场文书
投诉信范文
2015/07/02 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
教学反思怎么写
2016/02/24 职场文书
话题作文之呼唤
2019/12/18 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技