feat: fix some issues

History.md

@@ -1,5 +1,11 @@
 ## 2.2.17 2020-12-29
 
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/64)
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/65)
+- fix: issues  [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/66)
+
+## 2.2.17 2020-12-29
+
 - fix: long string expand arrow display error  [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/62)
 
 ## 2.2.16 2020-11-13

example/app.css

@@ -1,3 +1,6 @@
 .jv-number-float {
   color: #faa !important;
+}
+.jv-key-node {
+  display: flex;
 }

example/app.js

@@ -36,7 +36,8 @@ new Vue({
           expand-depth={5}
           copyable={{
             copyText: '复制',
-            copiedText: '复制成功'
+            copiedText: '复制成功',
+            align: 'left'
           }}
           boxed
           timeformat={time => new Date(time)}
@@ -46,7 +47,8 @@ new Vue({
           value={this.jsonData}
           expand-depth={1}
           copyable={{
-            timeout: 4000
+            timeout: 4000,
+            align: 'left'
           }}
           scopedSlots={scopedSlots}
           onCopied={onCopied}></json-viewer>

lib/json-box.vue

@@ -70,9 +70,9 @@ export default {
     } else if (typeof this.value === 'function') {
       dataType = JsonFunction
     }
-    const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
+    const complex = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
 
-    if (!this.previewMode && toggle) {
+    if (!this.previewMode && complex) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -117,7 +117,8 @@ export default {
     return h('div', {
       class: {
         'jv-node': true,
-        'toggle': !this.previewMode && toggle
+        'jv-key-node': Boolean(this.keyName) && !complex,
+        'toggle': !this.previewMode && complex
       }
     }, elements)
   }

lib/json-viewer.vue

@@ -2,7 +2,7 @@
   <div :class="jvClass">
     <div 
       v-if="copyable"
-      class="jv-tooltip"
+      :class="`jv-tooltip ${copyText.align || 'right'}`"
     >
       <span  
         ref="clip" 
@@ -108,12 +108,13 @@ export default {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
     },
     copyText() {
-      const { copyText, copiedText, timeout } = this.copyable
+      const { copyText, copiedText, timeout, align } = this.copyable
 
       return {
         copyText: copyText || 'copy',
         copiedText: copiedText || 'copied!',
-        timeout: timeout || 2000
+        timeout: timeout || 2000,
+        align,
       }
     }
   },
@@ -236,6 +237,10 @@ export default {
         color: #42b983;
         word-break: break-word;
         white-space: normal;
+
+        .jv-link {
+          color: #0366d6;
+        }
       }
     }
     .jv-code {
@@ -255,7 +260,7 @@ export default {
 
   .jv-code {
     overflow: hidden;
-    padding: 20px;
+    padding: 30px 20px;
 
     &.boxed {
       max-height: 300px;
@@ -357,8 +362,13 @@ export default {
 
   .jv-tooltip {
     position: absolute;
-    right: 15px;
-    top: 10px;
+
+    &.right {
+      right: 15px;
+    }
+    &.left {
+      left: 15px;
+    }
   }
 
   .j-icon {

lib/types/json-string.vue

@@ -51,7 +51,7 @@ export default {
         ref: 'itemRef',
       }
       if (islink) {
-        value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+        value = `<a href="${value}" target="_blank" class="jv-link">${value}</a>`;
         domItem.domProps = {
           innerHTML: `"${value.toString()}"`
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
   "files": [