526互联

vue-json-viewer 展示json数据

发布时间 2023-06-17 15:55:23作者: Cxymds

vue-json-viewer 展示json数据

当项目需要再网页中展示原始的json数据的时候，我们期望能够对json进行格式化展示，并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。

1. 安装

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

2. 配置

在main.js中添加以下内容，或者在单独的插件文件中添加。

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'

// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)

引入样式

import 'vue-json-viewer/style.css'

3. 使用

<json-viewer :value="jsonData"></json-viewer>

常用配置：

属性名 描述 是否必传
value JSON data (can be used with v-model) Required
expand-depth 展开层级 1
copyable 展示复制按钮 false
sort 排序 false
boxed 为组件添加一个盒样式 false
theme 添加一个和主题相关的类 jv-light
expanded 默认是否展开 false
timeformat 时间格式化函数 time => time.toLocaleString()
preview-mode 不可折叠模式，默认全部展开 false
show-array-index 展示数组的下标 true

事件

事件 描述 值
copied 复制文本后的事件
keyclick 点击key的事件

Slots

名称 描述 Scope
copy 自定义拷贝按钮 {copied: boolean}

快捷键

名称 描述
alt + click 展开当前节点下的所有节点

主题

有两个办法创建自定义主题, (e.g. my-awesome-json-theme):

  1. 添加 theme="my-awesome-json-theme" JsonViewer的组件属性
  2. 复制粘贴下面的模板并且根据自定义的theme名称做对应调整:
// values are default one from jv-light template
.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button { color: #49b3ff }
  .jv-key { color: #111111 }
  .jv-item {
    &.jv-array { color: #111111 }
    &.jv-boolean { color: #fc1e70 }
    &.jv-function { color: #067bca }
    &.jv-number { color: #fc1e70 }
    &.jv-number-float { color: #fc1e70 }
    &.jv-number-integer { color: #fc1e70 }
    &.jv-object { color: #111111 }
    &.jv-undefined { color: #e08331 }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}

显示：