如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)

更新時間：2023年11月09日 10:38:35 作者：＊且聽風吟

這篇文章主要給大家介紹了關于如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關資料,Vue-json-viewer是一個Vue組件,用于在Vue應用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下

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，可直接調(diào)用組件。具體實現(xiàn)：

在 main.js 文件中添加：

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

2.2、局部引入

如果在單頁面中只需要引入 import JsonViewer from 'vue-json-viewer' ，然后在 components 中注入 JsonViewer 組件，即可正常使用。

具體實現(xiàn)：

// 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 {}
      }
    },
    // 展開層數(shù)
    expand: {
      type: Number,
      default: 2
    }
  },
  watch: {
    data () {
      this.jsonData = this.data
    }
  },
  computed: {

  },
  created () {
  },
  methods: {

  }
}
</script>

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

value 代表顯示的 JSON 數(shù)據(jù)。

4、組件內(nèi)使用

在需要使用的頁面：

<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數(shù)據(jù)（必填）	Object	-
closed	是否折疊全部	Boolean	false
deep	展開深度,越大渲染速度越慢,建議不超過5）	Number	3
icon-style	折疊按鈕樣式，可選值為 [square, circle, triangle ]	String	square
icon-color	兩個折疊按鈕的顏色	Array	theme = vs-code 時，[’#c6c6c6’, ‘#c6c6c6’]，其他情況為 [’#747983’, ‘#747983’]
theme	可選主題樣式,可選值為 [one-dark, vs-code], 不選時為默認的白色主題	String	-
font-size	字體大小,單位 px	Number	14
line-height	行高，單位 px	Number	24