如何使用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 | 是否折叠全部 | 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 |
注:行高和字体大小不建议选用过大值,因为 icon 大小、每行的 padding-left 等参数并不会随之发生改变。
总结
到此这篇关于如何使用vue-json-viewer插件展示JSON格式数据的文章就介绍到这了,更多相关vue-json-viewer展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!