vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-json-viewer展示JSON数据

如何使用vue-json-viewer插件展示JSON格式数据

作者:*且听风吟

这篇文章主要给大家介绍了关于如何使用vue-json-viewer插件展示JSON格式数据的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下

1、下载 vue-json-viewer

npm 下载 vue-json-viewer :

// Vue2
npm install vue-json-viewer@2 --save
// Vue3
npm install vue-json-viewer@3 --save

yarn 下载 vue-json-viewer :

// Vue2
yarn add vue-json-viewer@2 
// Vue3
yarn add vue-json-viewer@3 

2、引入插件并注册

引入插件有两种方式:可以全局引入,也可以在单个页面文件中引入该插件。

2.1、全局注册组件

如果在全局 main.js 中引入,那么全局可用,无需在单独页面的 components 中注入 JsonViewer,可直接调用组件。具体实现:

在 main.js 文件中添加:

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

2.2、局部引入

如果在单页面中只需要引入 import JsonViewer from 'vue-json-viewer' ,然后在 components 中注入 JsonViewer 组件,即可正常使用。

具体实现:

// vue单页面文件中引入
<script>
    // 引入组件
    import JsonViewer from 'vue-json-viewer'
    export default {
          // 注册组件
          components:{
              JsonViewer
          }
    }
</script>

3、封装组件 JsonView

新建 JsonView.vue 文件:

<template>
  <div>
    <div v-show="showJson">
      <vue-json-viewer :value="jsonData" :expand-depth="expand"></vue-json-viewer>
    </div>
    <div v-show="!showJson">
      {{data}}
    </div>
  </div>
</template>

<script>
import vueJsonViewer from 'vue-json-viewer'

export default {
  name: '',
  data () {
    return {
      jsonData: this.data
    }
  },

  components: {
    vueJsonViewer
  },
  props: {
    showJson: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 展开层数
    expand: {
      type: Number,
      default: 2
    }
  },
  watch: {
    data () {
      this.jsonData = this.data
    }
  },
  computed: {

  },
  created () {
  },
  methods: {

  }
}
</script>

<style lang='less' module>
</style>

value 代表显示的 JSON 数据。

4、组件内使用

在需要使用的页面:

<template>
  <div>
    <json-view :data="jsonData"></json-view>
  </div>
</template>

<script>
import jsonView from './components/JsonView.vue'
export default {
  name: '',
  components: {
    jsonView
  },
  data () {
    return {
      jsonData: {
        "name": "小明",
        "age": 24,
        "gender": true,
        "height": 1.85,
        "weight": null,
        "skills": [
          {
            "PHP": [
              "Laravel",
              "Composer"
            ]
          },
          {
            "JavaScript": [
              "jQuery",
              "Vue",
              "React"
            ]
          },
          "Golang",
          "Python",
          "Lua"
        ]
      }
    }
  },
  methods: {
  }
}
</script>

<style lang=''>
</style>

页面效果:

5、插件可选配置说明

属性说明类型默认值
json传入的json数据(必填)Object-
closed是否折叠全部Booleanfalse
deep展开深度,越大渲染速度越慢,建议不超过5)Number3
icon-style折叠按钮样式,可选值为 [square, circle, triangle ]Stringsquare
icon-color两个折叠按钮的颜色Arraytheme = vs-code 时,[’#c6c6c6’, ‘#c6c6c6’],其他情况为 [’#747983’, ‘#747983’]
theme可选主题样式,可选值为 [one-dark, vs-code], 不选时为默认的白色主题String-
font-size字体大小,单位 pxNumber14
line-height行高,单位 pxNumber24

注:行高和字体大小不建议选用过大值,因为 icon 大小、每行的 padding-left 等参数并不会随之发生改变。

总结

到此这篇关于如何使用vue-json-viewer插件展示JSON格式数据的文章就介绍到这了,更多相关vue-json-viewer展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文