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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JavaScript数组操作详解
Feb 04 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
npm qs模块使用详解
Feb 07 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里得到前天和昨天的日期的代码
2007/08/16 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
javascript 节点遍历函数
2010/03/28 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python计算日期之间的放假日期
2018/06/05 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
工程项目经理岗位职责
2013/12/15 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
表扬通报怎么写
2015/01/16 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
2019年思想汇报
2019/06/20 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android