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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
一个用php3编写的简单计数器
2006/10/09 PHP
php empty函数 使用说明
2009/08/10 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
php开启openssl的方法
2014/05/15 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Python实现文件复制删除
2016/04/19 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python搜索包的路径的实现方法
2019/07/19 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
清洁工岗位职责
2014/01/29 职场文书
室内拓展活动方案
2014/02/13 职场文书
英语课外活动总结
2014/08/27 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
党员心得体会范文2016
2016/01/23 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android