From 919a57762b5543caeca9f9cbeb6ac8a002a340e7 Mon Sep 17 00:00:00 2001 From: qiuquanwu <919403255@qq.com> Date: Tue, 1 Mar 2022 11:50:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=AD=A3=E5=88=99=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98key=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 2 +- dist/bundle.cjs.js | 146 ++++++++++++++++++----- dist/bundle.esm.js | 146 ++++++++++++++++++----- dist/index.css | 2 +- package.json | 2 +- readme.md | 7 ++ readme_cn.md | 6 +- src/Components/json-box.vue | 168 +++++++++++++++------------ src/Components/json-viewer.vue | 14 ++- src/Components/types/json-regexp.vue | 77 ++++++++++++ 10 files changed, 425 insertions(+), 145 deletions(-) create mode 100644 src/Components/types/json-regexp.vue diff --git a/.vscode/settings.json b/.vscode/settings.json index 537c5e4..1cabe49 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,5 +12,5 @@ "workbench.colorTheme": "1984 - Unbolded", "window.autoDetectColorScheme": false, "editor.formatOnSave": true, - "vue3snippets.enable-compile-vue-file-on-did-save-code": true + "vue3snippets.enable-compile-vue-file-on-did-save-code": false } diff --git a/dist/bundle.cjs.js b/dist/bundle.cjs.js index a068c94..d6ad34b 100644 --- a/dist/bundle.cjs.js +++ b/dist/bundle.cjs.js @@ -14,8 +14,8 @@ function _typeof(obj) { }, _typeof(obj); } -var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; -var script$9 = { +var REG_LINK$1 = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; +var script$a = { name: 'JsonString', props: { jsonValue: { @@ -41,7 +41,7 @@ var script$9 = { }, render: function render() { var value = this.jsonValue; - var islink = REG_LINK.test(value); + var islink = REG_LINK$1.test(value); var domItem; if (!this.expand) { domItem = { @@ -81,9 +81,9 @@ var script$9 = { } }; -script$9.__file = "src/Components/types/json-string.vue"; +script$a.__file = "src/Components/types/json-string.vue"; -var script$8 = { +var script$9 = { name: 'JsonUndefined', functional: true, props: { @@ -103,9 +103,9 @@ var script$8 = { } }; -script$8.__file = "src/Components/types/json-undefined.vue"; +script$9.__file = "src/Components/types/json-undefined.vue"; -var script$7 = { +var script$8 = { name: 'JsonNumber', functional: true, props: { @@ -128,9 +128,9 @@ var script$7 = { } }; -script$7.__file = "src/Components/types/json-number.vue"; +script$8.__file = "src/Components/types/json-number.vue"; -var script$6 = { +var script$7 = { name: 'JsonBoolean', functional: true, props: { jsonValue: Boolean }, @@ -145,9 +145,9 @@ var script$6 = { } }; -script$6.__file = "src/Components/types/json-boolean.vue"; +script$7.__file = "src/Components/types/json-boolean.vue"; -var script$5 = { +var script$6 = { name: 'JsonObject', props: { jsonValue: { @@ -265,9 +265,9 @@ var script$5 = { } }; -script$5.__file = "src/Components/types/json-object.vue"; +script$6.__file = "src/Components/types/json-object.vue"; -var script$4 = { +var script$5 = { name: 'JsonArray', props: { jsonValue: { @@ -373,9 +373,9 @@ var script$4 = { } }; -script$4.__file = "src/Components/types/json-array.vue"; +script$5.__file = "src/Components/types/json-array.vue"; -var script$3 = { +var script$4 = { name: 'JsonFunction', functional: true, props: { @@ -396,9 +396,9 @@ var script$3 = { } }; -script$3.__file = "src/Components/types/json-function.vue"; +script$4.__file = "src/Components/types/json-function.vue"; -var script$2 = { +var script$3 = { name: 'JsonDate', inject: ['timeformat'], functional: true, @@ -421,11 +421,83 @@ var script$2 = { } }; -script$2.__file = "src/Components/types/json-date.vue"; +script$3.__file = "src/Components/types/json-date.vue"; + +var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; +var script$2 = { + name: 'JsonString', + props: { + jsonValue: { + type: RegExp, + required: true + } + }, + data: function data() { + return { + expand: true, + canExtend: false + }; + }, + mounted: function mounted() { + if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { + this.canExtend = true; + } + }, + methods: { + toggle: function toggle() { + this.expand = !this.expand; + } + }, + render: function render() { + var value = this.jsonValue; + var islink = REG_LINK.test(value); + var domItem; + if (!this.expand) { + domItem = { + 'class': { 'jv-ellipsis': true }, + onClick: this.toggle, + innerText: '...' + }; + } else { + domItem = { + 'class': { + 'jv-item': true, + 'jv-string': true + }, + ref: 'itemRef' + }; + if (islink) { + value = '').concat(value, ''); + domItem.innerHTML = ''.concat(value.toString()); + } else { + domItem.innerText = ''.concat(value.toString()); + } + } + return vue.h('span', {}, [ + this.canExtend && vue.h('span', { + 'class': { + 'jv-toggle': true, + open: this.expand + }, + onClick: this.toggle + }), + vue.h('span', { + 'class': { 'jv-holder-node': true }, + ref: 'holderRef' + }), + vue.h('span', domItem) + ]); + } +}; + +script$2.__file = "src/Components/types/json-regexp.vue"; var script$1 = { name: 'JsonBox', - inject: ['expandDepth'], + inject: [ + 'expandDepth', + 'keyClick' + ], props: { value: { type: [ @@ -473,21 +545,24 @@ var script$1 = { var elements = []; var dataType; if (this.value === null || this.value === undefined) { - dataType = script$8; + dataType = script$9; } else if (Array.isArray(this.value)) { - dataType = script$4; + dataType = script$5; } else if (Object.prototype.toString.call(this.value) === '[object Date]') { - dataType = script$2; + dataType = script$3; } else if (_typeof(this.value) === 'object') { - dataType = script$5; + dataType = script$6; } else if (typeof this.value === 'number') { - dataType = script$7; + dataType = script$8; } else if (typeof this.value === 'string') { - dataType = script$9; + dataType = script$a; } else if (typeof this.value === 'boolean') { - dataType = script$6; + dataType = script$7; } else if (typeof this.value === 'function') { - dataType = script$3; + dataType = script$4; + } + if (this.value.constructor === RegExp) { + dataType = script$2; } var complex = this.keyName && this.value && (Array.isArray(this.value) || _typeof(this.value) === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]'); if (!this.previewMode && complex) { @@ -502,6 +577,9 @@ var script$1 = { if (this.keyName) { elements.push(vue.h('span', { 'class': { 'jv-key': true }, + onClick: function onClick() { + _this.keyClick(_this.keyName); + }, innerText: ''.concat(this.keyName, ':') })); } @@ -521,7 +599,7 @@ var script$1 = { 'class': { 'jv-node': true, 'jv-key-node': Boolean(this.keyName) && !complex, - 'toggle': !this.previewMode && complex + toggle: !this.previewMode && complex } }, elements); } @@ -1160,7 +1238,7 @@ var script = { }, theme: { type: String, - 'default': 'jv-light' + 'default': 'light' }, timeformat: { type: Function, @@ -1176,7 +1254,8 @@ var script = { provide: function provide() { return { expandDepth: this.expandDepth, - timeformat: this.timeformat + timeformat: this.timeformat, + keyClick: this.keyClick }; }, data: function data() { @@ -1186,10 +1265,10 @@ var script = { expandCode: this.expanded }; }, + emits: ['onKeyClick'], computed: { jvClass: function jvClass() { - console.log('theme', this.$props); - return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : ''); + return 'jv-container ' + 'jv-' + this.theme + (this.boxed ? ' boxed' : ''); }, copyText: function copyText() { var _this$copyable = this.copyable, copyText = _this$copyable.copyText, copiedText = _this$copyable.copiedText, timeout = _this$copyable.timeout, align = _this$copyable.align; @@ -1240,6 +1319,9 @@ var script = { } }); }, + keyClick: function keyClick(keyName) { + this.$emit('onKeyClick', keyName); + }, onCopied: function onCopied(copyEvent) { var _this3 = this; if (this.copied) { diff --git a/dist/bundle.esm.js b/dist/bundle.esm.js index 4dfa645..92f9ba4 100644 --- a/dist/bundle.esm.js +++ b/dist/bundle.esm.js @@ -10,8 +10,8 @@ function _typeof(obj) { }, _typeof(obj); } -var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; -var script$9 = { +var REG_LINK$1 = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; +var script$a = { name: 'JsonString', props: { jsonValue: { @@ -37,7 +37,7 @@ var script$9 = { }, render: function render() { var value = this.jsonValue; - var islink = REG_LINK.test(value); + var islink = REG_LINK$1.test(value); var domItem; if (!this.expand) { domItem = { @@ -77,9 +77,9 @@ var script$9 = { } }; -script$9.__file = "src/Components/types/json-string.vue"; +script$a.__file = "src/Components/types/json-string.vue"; -var script$8 = { +var script$9 = { name: 'JsonUndefined', functional: true, props: { @@ -99,9 +99,9 @@ var script$8 = { } }; -script$8.__file = "src/Components/types/json-undefined.vue"; +script$9.__file = "src/Components/types/json-undefined.vue"; -var script$7 = { +var script$8 = { name: 'JsonNumber', functional: true, props: { @@ -124,9 +124,9 @@ var script$7 = { } }; -script$7.__file = "src/Components/types/json-number.vue"; +script$8.__file = "src/Components/types/json-number.vue"; -var script$6 = { +var script$7 = { name: 'JsonBoolean', functional: true, props: { jsonValue: Boolean }, @@ -141,9 +141,9 @@ var script$6 = { } }; -script$6.__file = "src/Components/types/json-boolean.vue"; +script$7.__file = "src/Components/types/json-boolean.vue"; -var script$5 = { +var script$6 = { name: 'JsonObject', props: { jsonValue: { @@ -261,9 +261,9 @@ var script$5 = { } }; -script$5.__file = "src/Components/types/json-object.vue"; +script$6.__file = "src/Components/types/json-object.vue"; -var script$4 = { +var script$5 = { name: 'JsonArray', props: { jsonValue: { @@ -369,9 +369,9 @@ var script$4 = { } }; -script$4.__file = "src/Components/types/json-array.vue"; +script$5.__file = "src/Components/types/json-array.vue"; -var script$3 = { +var script$4 = { name: 'JsonFunction', functional: true, props: { @@ -392,9 +392,9 @@ var script$3 = { } }; -script$3.__file = "src/Components/types/json-function.vue"; +script$4.__file = "src/Components/types/json-function.vue"; -var script$2 = { +var script$3 = { name: 'JsonDate', inject: ['timeformat'], functional: true, @@ -417,11 +417,83 @@ var script$2 = { } }; -script$2.__file = "src/Components/types/json-date.vue"; +script$3.__file = "src/Components/types/json-date.vue"; + +var REG_LINK = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; +var script$2 = { + name: 'JsonString', + props: { + jsonValue: { + type: RegExp, + required: true + } + }, + data: function data() { + return { + expand: true, + canExtend: false + }; + }, + mounted: function mounted() { + if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) { + this.canExtend = true; + } + }, + methods: { + toggle: function toggle() { + this.expand = !this.expand; + } + }, + render: function render() { + var value = this.jsonValue; + var islink = REG_LINK.test(value); + var domItem; + if (!this.expand) { + domItem = { + 'class': { 'jv-ellipsis': true }, + onClick: this.toggle, + innerText: '...' + }; + } else { + domItem = { + 'class': { + 'jv-item': true, + 'jv-string': true + }, + ref: 'itemRef' + }; + if (islink) { + value = '').concat(value, ''); + domItem.innerHTML = ''.concat(value.toString()); + } else { + domItem.innerText = ''.concat(value.toString()); + } + } + return h('span', {}, [ + this.canExtend && h('span', { + 'class': { + 'jv-toggle': true, + open: this.expand + }, + onClick: this.toggle + }), + h('span', { + 'class': { 'jv-holder-node': true }, + ref: 'holderRef' + }), + h('span', domItem) + ]); + } +}; + +script$2.__file = "src/Components/types/json-regexp.vue"; var script$1 = { name: 'JsonBox', - inject: ['expandDepth'], + inject: [ + 'expandDepth', + 'keyClick' + ], props: { value: { type: [ @@ -469,21 +541,24 @@ var script$1 = { var elements = []; var dataType; if (this.value === null || this.value === undefined) { - dataType = script$8; + dataType = script$9; } else if (Array.isArray(this.value)) { - dataType = script$4; + dataType = script$5; } else if (Object.prototype.toString.call(this.value) === '[object Date]') { - dataType = script$2; + dataType = script$3; } else if (_typeof(this.value) === 'object') { - dataType = script$5; + dataType = script$6; } else if (typeof this.value === 'number') { - dataType = script$7; + dataType = script$8; } else if (typeof this.value === 'string') { - dataType = script$9; + dataType = script$a; } else if (typeof this.value === 'boolean') { - dataType = script$6; + dataType = script$7; } else if (typeof this.value === 'function') { - dataType = script$3; + dataType = script$4; + } + if (this.value.constructor === RegExp) { + dataType = script$2; } var complex = this.keyName && this.value && (Array.isArray(this.value) || _typeof(this.value) === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]'); if (!this.previewMode && complex) { @@ -498,6 +573,9 @@ var script$1 = { if (this.keyName) { elements.push(h('span', { 'class': { 'jv-key': true }, + onClick: function onClick() { + _this.keyClick(_this.keyName); + }, innerText: ''.concat(this.keyName, ':') })); } @@ -517,7 +595,7 @@ var script$1 = { 'class': { 'jv-node': true, 'jv-key-node': Boolean(this.keyName) && !complex, - 'toggle': !this.previewMode && complex + toggle: !this.previewMode && complex } }, elements); } @@ -1156,7 +1234,7 @@ var script = { }, theme: { type: String, - 'default': 'jv-light' + 'default': 'light' }, timeformat: { type: Function, @@ -1172,7 +1250,8 @@ var script = { provide: function provide() { return { expandDepth: this.expandDepth, - timeformat: this.timeformat + timeformat: this.timeformat, + keyClick: this.keyClick }; }, data: function data() { @@ -1182,10 +1261,10 @@ var script = { expandCode: this.expanded }; }, + emits: ['onKeyClick'], computed: { jvClass: function jvClass() { - console.log('theme', this.$props); - return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : ''); + return 'jv-container ' + 'jv-' + this.theme + (this.boxed ? ' boxed' : ''); }, copyText: function copyText() { var _this$copyable = this.copyable, copyText = _this$copyable.copyText, copiedText = _this$copyable.copiedText, timeout = _this$copyable.timeout, align = _this$copyable.align; @@ -1236,6 +1315,9 @@ var script = { } }); }, + keyClick: function keyClick(keyName) { + this.$emit('onKeyClick', keyName); + }, onCopied: function onCopied(copyEvent) { var _this3 = this; if (this.copied) { diff --git a/dist/index.css b/dist/index.css index db45f3c..22aa102 100644 --- a/dist/index.css +++ b/dist/index.css @@ -1 +1 @@ -.jv-container{box-sizing:border-box;position:relative}.jv-container.boxed{border:1px solid #eee;border-radius:6px}.jv-container.boxed:hover{box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative}.jv-container.jv-light{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-dark{background:#282c34;white-space:nowrap;color:#fff;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-light .jv-ellipsis{color:#999;background-color:#eee;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-dark .jv-ellipsis{color:#999;background-color:#eee;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-light .jv-button{color:#49b3ff}.jv-container.jv-dark .jv-button{color:#49b3ff}.jv-container.jv-light .jv-key{color:#111;margin-right:4px}.jv-container.jv-dark .jv-key{color:#fff;margin-right:4px}.jv-container.jv-dark .jv-item.jv-array{color:#111}.jv-container.jv-dark .jv-item.jv-array{color:#fff}.jv-container.jv-dark .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-function{color:#067bca}.jv-container.jv-dark .jv-item.jv-number{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-object{color:#fff}.jv-container.jv-dark .jv-item.jv-undefined{color:#e08331}.jv-container.jv-dark .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-dark .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-dark .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-dark .jv-code .jv-toggle:hover:before{background:#eee}.jv-container.jv-light .jv-item.jv-array{color:#111}.jv-container.jv-light .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-light .jv-item.jv-function{color:#067bca}.jv-container.jv-light .jv-item.jv-number{color:#fc1e70}.jv-container.jv-light .jv-item.jv-object{color:#111}.jv-container.jv-light .jv-item.jv-undefined{color:#e08331}.jv-container.jv-light .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-light .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-light .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-light .jv-code .jv-toggle:hover:before{background:#eee}.jv-container .jv-code{overflow:hidden;padding:30px 20px}.jv-container .jv-code.boxed{max-height:300px}.jv-container .jv-code.open{max-height:initial!important;overflow:visible;overflow-x:auto;padding-bottom:45px}.jv-container .jv-toggle{background-image:url(./icon.svg);background-repeat:no-repeat;background-size:contain;background-position:center center;cursor:pointer;width:10px;height:10px;margin-right:2px;display:inline-block;transition:transform .1s}.jv-container .jv-toggle.open{transform:rotate(90deg)}.jv-container .jv-more{position:absolute;z-index:1;bottom:0;left:0;right:0;height:40px;width:100%;text-align:center;cursor:pointer}.jv-container .jv-more .jv-toggle{position:relative;top:40%;z-index:2;color:#888;transition:all .1s;transform:rotate(90deg)}.jv-container .jv-more .jv-toggle.open{transform:rotate(-90deg)}.jv-container .jv-more:after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%);transition:all .1s}.jv-container .jv-more:hover .jv-toggle{top:50%;color:#111}.jv-container .jv-more:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%)}.jv-container .jv-button{position:relative;cursor:pointer;display:inline-block;padding:5px;z-index:5}.jv-container .jv-button.copied{opacity:.4;cursor:default}.jv-container .jv-tooltip{position:absolute}.jv-container .jv-tooltip.right{right:15px}.jv-container .jv-tooltip.left{left:15px}.jv-container .j-icon{font-size:12px}.jv-node{position:relative}.jv-node:after{content:","}.jv-node:last-of-type:after{content:""}.jv-node.toggle{margin-left:13px!important}.jv-node .jv-node{margin-left:25px} \ No newline at end of file +.jv-container{box-sizing:border-box;position:relative}.jv-container.boxed{border:1px solid #eee;border-radius:6px}.jv-container.boxed:hover{box-shadow:0 2px 7px rgba(0,0,0,.15);border-color:transparent;position:relative}.jv-container.jv-light{background:#fff;white-space:nowrap;color:#525252;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-dark{background:#282c34;white-space:nowrap;color:#fff;font-size:14px;font-family:Consolas,Menlo,Courier,monospace}.jv-container.jv-light .jv-ellipsis{color:#999;background-color:#eee;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-dark .jv-ellipsis{color:#f8f8f8;background-color:#2c3e50;display:inline-block;line-height:.9;font-size:.9em;padding:0 4px 2px 4px;margin:0 4px;border-radius:3px;vertical-align:2px;cursor:pointer;user-select:none}.jv-container.jv-light .jv-button{color:#49b3ff}.jv-container.jv-dark .jv-button{color:#49b3ff}.jv-container.jv-light .jv-key{color:#111;margin-right:4px}.jv-container.jv-dark .jv-key{color:#fff;margin-right:4px}.jv-container.jv-dark .jv-item.jv-array{color:#111}.jv-container.jv-dark .jv-item.jv-array{color:#fff}.jv-container.jv-dark .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-function{color:#067bca}.jv-container.jv-dark .jv-item.jv-number{color:#fc1e70}.jv-container.jv-dark .jv-item.jv-object{color:#fff}.jv-container.jv-dark .jv-item.jv-undefined{color:#e08331}.jv-container.jv-dark .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-dark .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-dark .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-dark .jv-code .jv-toggle:hover:before{background:#eee}.jv-container.jv-light .jv-item.jv-array{color:#111}.jv-container.jv-light .jv-item.jv-boolean{color:#fc1e70}.jv-container.jv-light .jv-item.jv-function{color:#067bca}.jv-container.jv-light .jv-item.jv-number{color:#fc1e70}.jv-container.jv-light .jv-item.jv-object{color:#111}.jv-container.jv-light .jv-item.jv-undefined{color:#e08331}.jv-container.jv-light .jv-item.jv-string{color:#42b983;word-break:break-word;white-space:normal}.jv-container.jv-light .jv-item.jv-string .jv-link{color:#0366d6}.jv-container.jv-light .jv-code .jv-toggle:before{padding:0 2px;border-radius:2px}.jv-container.jv-light .jv-code .jv-toggle:hover:before{background:#eee}.jv-container .jv-code{overflow:hidden;padding:30px 20px}.jv-container .jv-code.boxed{max-height:300px}.jv-container .jv-code.open{max-height:initial!important;overflow:visible;overflow-x:auto;padding-bottom:45px}.jv-container .jv-toggle{background-image:url(./icon.svg);background-repeat:no-repeat;background-size:contain;background-position:center center;cursor:pointer;width:10px;height:10px;margin-right:2px;display:inline-block;transition:transform .1s}.jv-container .jv-toggle.open{transform:rotate(90deg)}.jv-container .jv-more{position:absolute;z-index:1;bottom:0;left:0;right:0;height:40px;width:100%;text-align:center;cursor:pointer}.jv-container .jv-more .jv-toggle{position:relative;top:40%;z-index:2;color:#888;transition:all .1s;transform:rotate(90deg)}.jv-container .jv-more .jv-toggle.open{transform:rotate(-90deg)}.jv-container .jv-more:after{content:"";width:100%;height:100%;position:absolute;bottom:0;left:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%);transition:all .1s}.jv-container .jv-more:hover .jv-toggle{top:50%;color:#111}.jv-container .jv-more:hover:after{background:linear-gradient(to bottom,rgba(0,0,0,0) 20%,rgba(230,230,230,.3) 100%)}.jv-container .jv-button{position:relative;cursor:pointer;display:inline-block;padding:5px;z-index:5}.jv-container .jv-button.copied{opacity:.4;cursor:default}.jv-container .jv-tooltip{position:absolute}.jv-container .jv-tooltip.right{right:15px}.jv-container .jv-tooltip.left{left:15px}.jv-container .j-icon{font-size:12px}.jv-node{position:relative}.jv-node:after{content:","}.jv-node:last-of-type:after{content:""}.jv-node.toggle{margin-left:13px!important}.jv-node .jv-node{margin-left:25px} \ No newline at end of file diff --git a/package.json b/package.json index 63b800c..7da4cb6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue3-json-viewer", - "version": "2.2.0", + "version": "2.2.1", "description": "vuejs展示json的组件,适配vue3", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", diff --git a/readme.md b/readme.md index 038e6bf..1fb15ce 100644 --- a/readme.md +++ b/readme.md @@ -20,6 +20,13 @@ Then install `vue3-json-viewer` $ npm install vue3-json-viewer --save ``` +## RecentUpdate +- dark theme support +- Add click event for keyNode +- Support RegExp types + +## Doc +> [document](https://vjv-doc-qiuquanwu.vercel.app/) ## Usage main.js diff --git a/readme_cn.md b/readme_cn.md index 48ccf85..6c2ef84 100644 --- a/readme_cn.md +++ b/readme_cn.md @@ -17,7 +17,11 @@ $ npm install clipboard --save ``` $ npm install vue3-json-viewer --save ``` - +## 近期更新 +- 暗夜主题支持 +- 添加key节点点击事件 +- 支持正则表达式类型 + ## 使用 main.js diff --git a/src/Components/json-box.vue b/src/Components/json-box.vue index 4947523..4e105ab 100644 --- a/src/Components/json-box.vue +++ b/src/Components/json-box.vue @@ -1,120 +1,144 @@