欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2024年05月07日 11:57:15   作者：一朵野花壓海棠  
這篇文章主要給大家介紹了關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,前端使用這個(gè)插件可以方便展現(xiàn)出json格式的數(shù)據(jù),下載引入使用代碼可直接使用,需要的朋友可以參考下

1、安裝 vue-json-viewer插件

npm install vue-json-viewer --save

官網(wǎng)地址： https://www.npmjs.com/package/vue-json-viewer

2、引入插件并注冊(cè)

2.1 全局注冊(cè)組件

在全局 main.js 中引入，在 main.js 文件中添加：

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

2.2 單個(gè)頁面局部引入

import JsonViewer from 'vue-json-viewer'
export default {
   components:{ JsonViewer }
}

3、插件的基礎(chǔ)使用

    <json-viewer
      :value="JSON.parse(jsonStr)"
      :expand-depth="5"
      boxed
      sort
      :show-array-index="false"
      copyable
    >
      <template slot="copy">
        <i class="el-icon-document-copy" title="復(fù)制"></i>
      </template>
    </json-viewer>
....
data(){
    return{
        jsonStr:"{\r\n    \"success\": true,\r\n    \"code\": 200,\r\n    \"msg\": \"操作成功\",\r\n    \"data\": \"\"\r\n}"
    }
}

4、插件可選配置說明

4.1 選項(xiàng)

屬性描述默認(rèn)值
valuejson對(duì)象的值，可以使用v-model，支持響應(yīng)式必填
expand-depth默認(rèn)展開的層級(jí)1
copyable展示復(fù)制按鈕，默認(rèn)文案為：copy、copied!, 你可以設(shè)置一個(gè)對(duì)象{copyText: ‘copy’, copiedText: ‘copied’} 來自定義復(fù)制按鈕文案false
sort按照key排序展示false
boxed為組件添加一個(gè)盒樣式false
theme添加一個(gè)自定義的樣式class用作主題 jv-light
expanded默認(rèn)展開視圖false
timeformat自定義時(shí)間格式函數(shù)time => time.toLocaleString()
preview-mode不可折疊模式，默認(rèn)全部展開alse
show-array-index是否顯示數(shù)組索引true
show-double-quotes展示key雙引號(hào)false

4.2 事件

事件描述值
copied復(fù)制文本后的事件
keyclick點(diǎn)擊key的事件

4.3 Slots

名稱描述Scope
copy自定義拷貝按鈕{copied: boolean}

4.4 主題

有兩個(gè)辦法創(chuàng)建自定義主題, (e.g. my-awesome-json-theme):

  • 添加 theme=“my-awesome-json-theme” JsonViewer的組件屬性
  • 添加 theme=“my-awesome-json-theme” JsonViewer的組件屬性
// 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;
        }
      }
    }
  }
}

5、實(shí)現(xiàn)效果

總結(jié)

到此這篇關(guān)于vue使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue-json-viewer展示JSON數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue組件模板的幾種書寫形式(3種)

    Vue組件模板的幾種書寫形式(3種)

    這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vue3路由新玩法useRoute和useRouter詳解

    vue3路由新玩法useRoute和useRouter詳解

    這篇文章主要介紹了vue3路由新玩法useRoute和useRouter，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue項(xiàng)目history模式下微信分享爬坑總結(jié)

    Vue項(xiàng)目history模式下微信分享爬坑總結(jié)

    這篇文章主要介紹了Vue項(xiàng)目history模式下微信分享爬坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • 關(guān)于vue組件事件屬性穿透詳解

    關(guān)于vue組件事件屬性穿透詳解

    今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vue?privide?和inject?依賴注入的使用詳解

    Vue?privide?和inject?依賴注入的使用詳解

    這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-10-10
  • antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解

    antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • vue多頁面項(xiàng)目中路由使用history模式的方法

    vue多頁面項(xiàng)目中路由使用history模式的方法

    這篇文章主要介紹了vue多頁面項(xiàng)目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • Vue 過渡（動(dòng)畫）transition組件案例詳解

    Vue 過渡（動(dòng)畫）transition組件案例詳解

    這篇文章主要介紹了Vue 過渡（動(dòng)畫）transition組件案例詳解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
    2017-01-01
  • vue proxyTable 接口跨域請(qǐng)求調(diào)試的示例

    vue proxyTable 接口跨域請(qǐng)求調(diào)試的示例

    本篇文章主要介紹了vue proxyTable 接口跨域請(qǐng)求調(diào)試的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • Vue中import from的來源及省略后綴與加載文件夾問題

    Vue中import from的來源及省略后綴與加載文件夾問題

    這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-02-02

最新評(píng)論