vue使用vue-json-viewer展示JSON數(shù)據(jù)的詳細步驟

更新時間：2022年09月01日 12:00:14 作者：接著奏樂接著舞。

最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據(jù)的相關資料,需要的朋友可以參考下

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.組件內(nèi)使用

jsonData就是你想要渲染的數(shù)據(jù)

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

假數(shù)據(jù)供測試效果：

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

效果圖：

4.一點使用技巧、心得

在使用類似插件的時候，先寫假數(shù)據(jù)，如果能正常渲染，那就將后端的數(shù)據(jù)處理成假數(shù)據(jù)一樣的格式。

另外，前端處理JSON數(shù)據(jù)一般使用JSON.parse()、eval()或者JSON.stringify()方法，要注意的是他們對格式的要求極其嚴格，如果你的數(shù)據(jù)格式不對，就會報錯。相對來說我個人比較保險的做法是：先JSON.parse(JSON.stringify())然后再JSON.parse()。

ps:JSON.stringify()序列化為JSON字符串;

JSON.parse()j解析為javascript對象

補充：設置編輯器的樣式使其風格適用于項目

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查看元素的類名去改，和我們平時開發(fā)沒啥區(qū)別，還是挺方便的。

.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);
        }
      }
    }
  }
}