JSON 格式化展示

Installation

npm install vue-json-viewer --save-dev
// or
yarn add vue-json-viewer -D

Options

Property Description Default
value JSON data (can be used with v-model) Required
expand-depth Collapse blocs under this depth 1
copyable Display the copy button, you can customize copy text just set {copyText: 'copy', copiedText: 'copied', timeout: 2000} or set true use default copytext false
sort Sort keys before displaying false
boxed Add a fancy "boxed" style to component false
theme Add a custom CSS class for theming purposes jv-light
expanded Default expand the view false
timeformat custom time format function time => time.toLocaleString()
preview-mode no expand mode false
array show index array show index true
show-double-quotes show double quotes false

Listeners

Listener Description Value
copied Emits copyEvent after text copied Clipboard success event
keyclick click key event

Slots

Name Description Scope
copy Custom content for copy button {copied: boolean}

Using

<template>
  <vue-json-viewer :value="jsonData"></vue-json-viewer>
</template>
<script>
import JsonViewer from 'vue-json-viewer'
export default {
  name: 'Template',
  data () {
    jsonData: {
      user: '孫悟空',
      weapon: '金箍棒',
      age: '800+',
      brothers: ['豬八戒', '沙悟凈']
    }
  }
}
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容