vue使用vue-json-viewer展示JSON数据步骤

淩亂°似流年 2023-09-29 06:13 8阅读 0赞

**目录**

1.下载

npm下载：

yarn下载：

2.引入并全局注册

3.组件内使用

4.一点使用技巧、心得

5.修改编辑的样式，使其符合项目需求

--------------------

### **1.下载** ###

--------------------

#### **npm下载：** ####

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

#### **yarn下载：** ####

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

--------------------

###  ###

### 2.引入并全局注册 ###

--------------------

**在main.js（入口文件里面）**

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

--------------------

### 3.组件内使用 ###

jsonData就是你想要渲染的数据

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

**假数据供测试效果：**

data(){
        return {
            jsonData:{
            name:"小明",
            age:18,
            items：{
                like:"pingpang",
                skip:0
                    }
                 }
            }
    }

**效果图：**

![e57a996842e4467592319c307b5b2b02.png][]

--------------------

### 4.一点使用技巧、心得 ###

> 在使用类似插件的时候，先写假数据，如果能正常渲染，那就将后端的数据处理成假数据一样的格式。
> 
> 另外，前端处理JSON数据一般使用JSON.parse()、eval()或者JSON.stringify()方法，要注意的是他们对格式的要求极其严格，如果你的数据格式不对，就会报错。相对来说我个人比较保险的做法是：先JSON.parse(JSON.stringify())然后再JSON.parse()。
> 
> ps:JSON.stringify()序列化为JSON字符串;
> 
>  JSON.parse()j解析为javascript对象

--------------------

**2022年8.15日更新以下内容：设置编辑器的样式使其风格适用于项目**

--------------------

#### 5.修改编辑的样式，使其符合项目需求 ####

**第一步，在组件加一个属性**

theme="my-awesome-json-theme"

<json-viewer
                  v-for="(ite, idx) in finallyJsonList"
                  :key="idx"
                  style="width: 100%; min-width: 3.125rem"
                  :value="ite"
                  :expand-depth="5"
                  copyable
                  boxed
                  theme="my-awesome-json-theme"
                  sort
                ></json-viewer>

--------------------

**第二步，在这个类名里面写样式了**

> 需要注意的是，这个编辑器完全可以使用浏览器F12查看元素的类名去改，和我们平时开发没啥区别，还是挺方便的。

.my-awesome-json-theme {
      overflow-x: hidden;
      background: #0c2b52;
      white-space: nowrap;
      color: #01fef4;
      font-size: 14px;
      font-family: Consolas, Menlo, Courier, monospace;
    
      .jv-ellipsis {
        color: rgb(237, 13, 13);
        background-color: rgb(241, 11, 11);
        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;
      }
      ::v-deep .jv-key {
        color: #01fef4 !important;
      }
      ::v-deep .jv-push {
        color: #fff;
      }
      .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 {
        ::v-deep .jv-toggle {
          color: #067bca !important;
          &:before {
            padding: 0px 2px;
            border-radius: 2px;
          }
          &:hover {
            &:before {
              background: rgb(242, 5, 5);
            }
          }
        }
      }
    }

[e57a996842e4467592319c307b5b2b02.png]: https://img-blog.csdnimg.cn/e57a996842e4467592319c307b5b2b02.png