diff --git a/lib/json-box.vue b/lib/json-box.vue index e800f46..20e65ff 100644 --- a/lib/json-box.vue +++ b/lib/json-box.vue @@ -10,7 +10,7 @@ import JsonDate from './types/json-date' export default { name: 'JsonBox', - inject: ['expandDepth', 'onKeyclick'], + inject: ['expandDepth', 'onKeyclick', 'needCollapseKeys', 'needCollapsePaths'], props: { value: { type: [Object, Array, String, Number, Boolean, Function, Date], @@ -39,11 +39,36 @@ export default { expand: true, forceExpandMe: this.forceExpand, } + }, + watch: { + 'needCollapsePaths': function(newVal) { + this.changeNeedCollapsePaths(newVal) + }, + 'needCollapseKeys': function(newVal) { + this.changeNeedCollapseKeys(newVal) + } }, mounted() { this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true) || this.forceExpandMe + this.changeNeedCollapseKeys(this.needCollapseKeys) + this.changeNeedCollapsePaths(this.needCollapsePaths) }, methods: { + changeNeedCollapsePaths(needCollapasePaths) { + const fullpath = this.getPath().join('.') + if (Array.isArray(needCollapasePaths) && fullpath) { + if (needCollapasePaths.includes(fullpath)) { + this.expand = false + } + } + }, + changeNeedCollapseKeys(needCollapseKeys) { + if (Array.isArray(needCollapseKeys)) { + if (needCollapseKeys.includes(this.keyName)) { + this.expand = false + } + } + }, toggle() { this.expand = !this.expand diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 0ead5b6..923bebd 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -102,13 +102,23 @@ export default { showDoubleQuotes: { type: Boolean, default: false, - } + }, + needCollapsePaths: { + type: Array, + default: () => [] + }, + needCollapseKeys: { + type: Array, + default: () => [] + }, }, provide () { return { expandDepth: this.expandDepth, timeformat: this.timeformat, onKeyclick: this.onKeyclick, + needCollapseKeys: this.needCollapseKeys, + needCollapsePaths: this.needCollapsePaths } }, data () {