diff --git a/README.md b/README.md index 59aa593..a97e290 100644 --- a/README.md +++ b/README.md @@ -160,6 +160,8 @@ import 'vue-json-viewer/style.css' | `expanded` | Default expand the view | `false` | | `timeformat` | custom time format function | time => time.toLocaleString() | | `preview-mode` | no expand mode | `false` | +| `show-array-index` | array show index | `true` | + ## Listeners @@ -173,6 +175,11 @@ import 'vue-json-viewer/style.css' | ----------- |:------------- | ----------- | | `copy` | Custom content for copy button | `{copied: boolean}` | +## shortcut keys +| Name | Description | Scope | +| ----------- |:------------- | ----------- | +| `alt` + click | expand all node | | + ## Theming To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps: diff --git a/README_CN.md b/README_CN.md index 48811bf..68e1f64 100644 --- a/README_CN.md +++ b/README_CN.md @@ -154,6 +154,25 @@ import 'vue-json-viewer/style.css' | `expanded` | 默认展开视图 | `false` | | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() | | `preview-mode` | 不可折叠模式,默认全部展开 | `false` | +| `show-array-index` | 是否显示数组索引 | `true` | + + +## 事件 + +| 事件 | 描述 | 值 | +| ----------- |:------------- | ----------- | +| `copied` | 复制文本后的事件 | | + +## Slots + +| 名称 | 描述 | Scope | +| ----------- |:------------- | ----------- | +| `copy` | 自定义拷贝按钮 | `{copied: boolean}` | + +## 快捷键 +| 名称 | 描述 | +| ----------- |:------------- | +| `alt` + click | 展开当前节点下的所有节点 | ## 主题 diff --git a/example/app.js b/example/app.js index 5500ea1..4409a71 100644 --- a/example/app.js +++ b/example/app.js @@ -40,6 +40,7 @@ new Vue({ align: 'left' }} boxed + show-array-index={false} timeformat={time => new Date(time)} sort>
diff --git a/lib/json-box.vue b/lib/json-box.vue index fb622e2..8afb4bf 100644 --- a/lib/json-box.vue +++ b/lib/json-box.vue @@ -26,19 +26,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) { @@ -64,7 +76,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 { open: !!this.expand }, on: { - click: this.toggle + click: (event) => { + if (event.altKey) { + this.toggleAll() + } else { + this.toggle() + } + } } })) } @@ -117,10 +135,16 @@ export default { depth: this.depth, expand: this.expand, previewMode: this.previewMode, + forceExpand: this.forceExpandMe, + showArrayIndex: this.showArrayIndex, }, on: { 'update:expand': value => { this.expand = value + }, + 'update:expandAll': value => { + this.expand = value + this.forceExpandMe = this.expand } } })) diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 1519c78..5365041 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -1,5 +1,8 @@