mirrors/vue-json-viewer
2
0
Fork 0
mirror of https://github.com/tenrok/vue-json-viewer.git synced 2026-06-11 18:02:29 +03:00
Code Activity

feat: merge develop

Browse Source
This commit is contained in:
fengqi.cf
2021-12-18 16:08:06 +08:00
parent 55b3fbc032 343bad03b4
commit 2195ff05d9
7 changed files with 109 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -3
View File
@@ -2,7 +2,7 @@
[中文版](https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md)
Simple JSON viewer component, for Vue.js 2.
Simple JSON viewer component, for Vue.js 2 or 3.
Support for incremental update components
@@ -20,12 +20,18 @@ Support for incremental update components
## Installing
Using npm:
```
$ npm install vue-json-viewer --save
$ npm install vue-json-viewer@2 --save
// Vue2
$ npm install vue-json-viewer@3 --save
// Vue3
```
Using yarn:
```
$ yarn add vue-json-viewer
$ yarn add vue-json-viewer@2
// Vue2
$ yarn add vue-json-viewer@3
// Vue3
```
## Example
README_CN.md
+9 -3
View File
@@ -1,6 +1,6 @@
# vue-json-viewer
简单易用的json内容展示组件，支持vue@2.0+，支持SSR，组件支持增量渲染即使大文件json也可以快速渲染。
简单易用的json内容展示组件，支持vue@2和3，支持SSR，组件支持增量渲染即使大文件json也可以快速渲染。
[![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer)
[![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer)
@@ -14,12 +14,18 @@
## 安装
使用 npm:
```
$ npm install vue-json-viewer --save
$ npm install vue-json-viewer@2 --save
// Vue2
$ npm install vue-json-viewer@3 --save
// Vue3
```
使用 yarn:
```
$ yarn add vue-json-viewer
$ yarn add vue-json-viewer@2
// Vue2
$ yarn add vue-json-viewer@3
// Vue3
```
## 示例
example/package.json
+5
View File
@@ -0,0 +1,5 @@
{
"dependencies": {
"vue-json-viewer": "^3.0.1"
}
}
lib/json-box.vue
+28 -4
View File
@@ -27,19 +27,31 @@ export default {
default: 0
},
previewMode: Boolean,
forceExpand: Boolean,
showArrayIndex: Boolean,
},
data() {
return {
expand: true
expand: true,
forceExpandMe: this.forceExpand,
}
},
mounted() {
this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true)
this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe
},
methods: {
toggle() {
this.expand = !this.expand
this.dispatchEvent()
},
toggleAll() {
this.expand = !this.expand
this.forceExpandMe = this.expand
this.dispatchEvent()
},
dispatchEvent() {
try {
this.$el.dispatchEvent(new Event('resized'))
} catch (e) {
@@ -65,7 +77,7 @@ export default {
let elements = []
let dataType
if (this.value === null || this.value === undefined) {
if (this.value === null || this.value === undefined) {
dataType = JsonUndefined
} else if (Array.isArray(this.value)) {
dataType = JsonArray
@@ -90,7 +102,13 @@ export default {
'jv-toggle': true,
open: !!this.expand
},
onClick: this.toggle
onClick: (event) => {
if (event.altKey) {
this.toggleAll()
} else {
this.toggle()
}
}
}))
}
@@ -113,8 +131,14 @@ export default {
depth: this.depth,
expand: this.expand,
previewMode: this.previewMode,
forceExpand: this.forceExpandMe,
showArrayIndex: this.showArrayIndex,
'onUpdate:expand': value => {
this.expand = value
},
'onUpdate:expandAll': value => {
this.expand = value
this.forceExpandMe = this.expand
}
}))
lib/json-viewer.vue
+10 -2
View File
@@ -1,6 +1,9 @@
<template>
<div ref="viewer" :class="jvClass">
<div
<div
ref="viewer"
:class="jvClass"
>
<div
v-if="copyable"
:class="`jv-tooltip ${copyText.align || 'right'}`"
>
@@ -26,6 +29,7 @@
:value="value"
:sort="sort"
:preview-mode="previewMode"
:show-array-index="showArrayIndex"
/>
</div>
<div
@@ -88,6 +92,10 @@ export default {
previewMode: {
type: Boolean,
default: false,
},
showArrayIndex: {
type: Boolean,
default: true,
}
},
provide () {
lib/types/json-array.vue
+26 -8
View File
@@ -19,7 +19,9 @@ export default {
},
sort: Boolean,
expand: Boolean,
forceExpand: Boolean,
previewMode: Boolean,
showArrayIndex: Boolean,
},
data() {
return {
@@ -48,7 +50,13 @@ export default {
},
toggle() {
this.$emit('update:expand', !this.expand)
this.dispatchEvent();
},
toggleAll() {
this.$emit('update:expandAll', !this.expand)
this.dispatchEvent();
},
dispatchEvent() {
try {
this.$el.dispatchEvent(new Event('resized'))
} catch (e) {
@@ -58,7 +66,6 @@ export default {
this.$el.dispatchEvent(evt)
}
},
},
render () {
let elements = []
@@ -69,7 +76,13 @@ export default {
'jv-toggle': true,
'open': !!this.expand,
},
onClick: this.toggle
onClick: (event) => {
if (event.altKey) {
this.toggleAll()
} else {
this.toggle()
}
}
}))
}
@@ -88,23 +101,28 @@ export default {
display: this.expand ? undefined : 'none'
},
sort: this.sort,
keyName: `${key}`,
keyName: this.showArrayIndex ? `${key}`: '',
depth: this.depth + 1,
value,
previewMode: this.previewMode,
forceExpand: this.forceExpand,
showArrayIndex: this.showArrayIndex,
}))
})
}
if (!this.expand && this.value.length) {
elements.push(h('span', {
style: {
display: undefined
},
class: {
'jv-ellipsis': true,
},
onClick: this.toggle,
onClick: (event) => {
if (event.altKey) {
this.toggleAll()
} else {
this.toggle()
}
},
title: `click to reveal ${this.value.length} hidden items`,
innerText: '...'
}))
lib/types/json-object.vue
+22 -6
View File
@@ -18,8 +18,10 @@ export default {
default: 0
},
expand: Boolean,
forceExpand: Boolean,
sort: Boolean,
previewMode: Boolean,
showArrayIndex: Boolean,
},
data() {
return {
@@ -57,6 +59,10 @@ export default {
this.$emit('update:expand', !this.expand)
this.dispatchEvent();
},
toggleAll() {
this.$emit('update:expandAll', !this.expand)
this.dispatchEvent();
},
dispatchEvent() {
try {
this.$el.dispatchEvent(new Event('resized'))
@@ -77,7 +83,13 @@ export default {
'jv-toggle': true,
'open': !!this.expand,
},
onClick: this.toggle
onClick: (event) => {
if (event.altKey) {
this.toggleAll()
} else {
this.toggle()
}
}
}))
}
@@ -99,12 +111,13 @@ export default {
style: {
display: !this.expand ? 'none' : undefined
},
sort: this.sort,
keyName: key,
depth: this.depth + 1,
value,
previewMode: this.previewMode,
forceExpand: this.forceExpand,
showArrayIndex: this.showArrayIndex,
}))
}
}
@@ -112,13 +125,16 @@ export default {
if (!this.expand && Object.keys(this.value).length) {
elements.push(h('span', {
style: {
display: this.expand ? 'none' : undefined
},
class: {
'jv-ellipsis': true,
},
onClick: this.toggle,
onClick: (event) => {
if (event.altKey) {
this.toggleAll()
} else {
this.toggle()
}
},
title: `click to reveal object content (keys: ${Object.keys(this.ordered).join(', ')})`,
innerText: '...'
}))