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è)頁(yè)面局部引入
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、插件可選配置說(shuō)明
4.1 選項(xiàng)
| 屬性 | 描述 | 默認(rèn)值 |
|---|---|---|
| value | json對(duì)象的值，可以使用v-model，支持響應(yīng)式 | 必填 |
| expand-depth | 默認(rèn)展開(kāi)的層級(jí) | 1 |
| copyable | 展示復(fù)制按鈕，默認(rèn)文案為：copy、copied!, 你可以設(shè)置一個(gè)對(duì)象{copyText: ‘copy’, copiedText: ‘copied’} 來(lái)自定義復(fù)制按鈕文案 | false |
| sort | 按照key排序展示 | false |
| boxed | 為組件添加一個(gè)盒樣式 | false |
| theme | 添加一個(gè)自定義的樣式class用作主題 jv-light | |
| expanded | 默認(rèn)展開(kāi)視圖 | false |
| timeformat | 自定義時(shí)間格式函數(shù) | time => time.toLocaleString() |
| preview-mode | 不可折疊模式，默認(rèn)全部展開(kāi) | 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)文章
斗魚(yú)直播是比較火的直播視頻，想必大家都看過(guò)吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚(yú)直播步驟詳解,需要的朋友可以參考下2017-11-11
Element UI響應(yīng)式布局問(wèn)題的解決
本文主要介紹了Element UI響應(yīng)式布局問(wèn)題的解決,提供了五種屏幕大小尺寸,xs、sm、md、lg 和 xl,并對(duì)這五種尺寸提供了兩種解決方案,感興趣的可以了解一下2025-08-08
Vue 應(yīng)用在首屏加載時(shí)速度過(guò)慢,通常與以下問(wèn)題有關(guān)：打包文件過(guò)大、網(wǎng)絡(luò)請(qǐng)求過(guò)多、資源加載過(guò)慢,針對(duì)這些問(wèn)題,本文給大家介紹了Vue首屏加載過(guò)慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
vue 實(shí)現(xiàn)無(wú)規(guī)則截圖
這篇文章主要介紹了vue 實(shí)現(xiàn)無(wú)規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式
在看element-ui的源碼的時(shí)候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下2021-05-05
這篇文章主要介紹了vue.js 父向子組件傳參的實(shí)例代碼,需要的朋友可以參考下2017-10-10
本文主要介紹在vue項(xiàng)目中,遇到數(shù)據(jù)更新但視圖不更新的情況時(shí),無(wú)法使用watch監(jiān)聽(tīng)、無(wú)法使用this.$set方法,同時(shí)使用this.$forceUpdate()無(wú)效時(shí),所使用的解決方案,需要的朋友可以參考下2024-02-02
vue3 element-plus el-tree自定義圖標(biāo)方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了詳解vue-cli 2.0配置文件(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01