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>
