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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
Node 代理访问的实现
Sep 19 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
JS函数本身的作用域实例分析
Mar 16 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
Yii支持多域名cors原理的实现
2018/12/05 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
详解python时间模块中的datetime模块
2016/01/13 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Django url 路由匹配过程详解
2021/01/22 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
一道SQL存储过程面试题
2016/10/07 面试题
秘书专业自荐信范文
2013/12/26 职场文书
家庭贫困证明
2014/09/23 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Python制作春联的示例代码
2022/01/22 Python