Merge pull request #91 from chenfengjw163/develop

Develop

README.md

@@ -161,6 +161,7 @@ import 'vue-json-viewer/style.css'
 | `timeformat` | custom time format function | time => time.toLocaleString() |
 | `preview-mode` | no expand mode | `false` |
 | `show-array-index` | array show index | `true` |
+| `show-double-quotes` | show double quotes | `false` |
 
 
 ## Listeners
@@ -168,6 +169,7 @@ import 'vue-json-viewer/style.css'
 | Listener | Description | Value |
 | ----------- |:------------- | ----------- |
 | `copied` | Emits copyEvent after text copied | Clipboard success event |
+| `keyclick` | click key event |  |
 
 ## Slots
 

README_CN.md

@@ -155,6 +155,7 @@ import 'vue-json-viewer/style.css'
 | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() |
 | `preview-mode` | 不可折叠模式，默认全部展开 | `false` |
 | `show-array-index` | 是否显示数组索引 | `true` |
+| `show-double-quotes` | 展示key双引号 | `false` |
 
 
 ## 事件
@@ -162,6 +163,7 @@ import 'vue-json-viewer/style.css'
 | 事件 | 描述 | 值 |
 | ----------- |:------------- | ----------- |
 | `copied` | 复制文本后的事件 |  |
+| `keyclick` | 点击key的事件 |  |
 
 ## Slots
 

example/app.js

@@ -16,6 +16,9 @@ new Vue({
     const onCopied = (copyEvent) => {
       alert(`Text successfully copied!\n${copyEvent.text}`);
     }
+    const onKeyclick = (path) => {
+      alert(`Key Click!\n${path}`);
+    }
     return (
       <div>
         <json-viewer
@@ -40,9 +43,12 @@ new Vue({
             align: 'left'
           }}
           boxed
+          show-double-quotes
           show-array-index={false}
           timeformat={time => new Date(time)}
-          sort></json-viewer>
+          sort
+          onKeyclick={onKeyclick}
+          ></json-viewer>
         <hr />
         <json-viewer
           value={this.jsonData}

lib/json-box.vue

@@ -10,7 +10,7 @@ import JsonDate from './types/json-date'
 
 export default {
   name: 'JsonBox',
-  inject: ['expandDepth'],
+  inject: ['expandDepth', 'onKeyclick'],
   props: {
     value: {
       type: [Object, Array, String, Number, Boolean, Function, Date],
@@ -28,6 +28,11 @@ export default {
     previewMode: Boolean,
     forceExpand: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: {
+      type: String,
+      default: '$',
+    },
   },
   data() {
     return {
@@ -119,7 +124,12 @@ export default {
           'jv-key': true
         },
         domProps: {
-          innerText: `${this.keyName}:`
+          innerText: this.showDoubleQuotes ? `"${this.keyName}":` : `${this.keyName}:`
+        },
+        on: {
+          click: () => {
+            this.onKeyclick(this.path);
+          }
         }
       }))
     }
@@ -137,6 +147,8 @@ export default {
         previewMode: this.previewMode,
         forceExpand: this.forceExpandMe,
         showArrayIndex: this.showArrayIndex,
+        showDoubleQuotes: this.showDoubleQuotes,
+        path: this.path,
       },
       on: {
         'update:expand': value => {

lib/json-viewer.vue

@@ -30,6 +30,8 @@
         :sort="sort"
         :preview-mode="previewMode"
         :show-array-index="showArrayIndex"
+        :show-double-quotes="showDoubleQuotes"
+        @keyclick="onKeyclick"
       />
     </div>
     <div 
@@ -96,12 +98,17 @@ export default {
     showArrayIndex: {
       type: Boolean,
       default: true,
+    },
+    showDoubleQuotes: {
+      type: Boolean,
+      default: false,
     }
   },
   provide () {
     return {
       expandDepth: this.expandDepth,
       timeformat: this.timeformat,
+      onKeyclick: this.onKeyclick,
     }
   },
   data () {
@@ -175,6 +182,9 @@ export default {
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode
+    },
+    onKeyclick(path) {
+      this.$emit('keyclick', path)
     }
   }
 }

lib/types/json-array.vue

@@ -21,6 +21,8 @@ export default {
     forceExpand: Boolean,
     previewMode: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: String,
   },
   data() {
     return {
@@ -108,6 +110,8 @@ export default {
             previewMode: this.previewMode,
             forceExpand: this.forceExpand,
             showArrayIndex: this.showArrayIndex,
+            showDoubleQuotes: this.showDoubleQuotes,
+            path: `${this.path}.${key}`,
           }
         }))
       })

lib/types/json-object.vue

@@ -21,6 +21,8 @@ export default {
     sort: Boolean,
     previewMode: Boolean,
     showArrayIndex: Boolean,
+    showDoubleQuotes: Boolean,
+    path: String,
   },
   data() {
     return {
@@ -119,6 +121,8 @@ export default {
               previewMode: this.previewMode,
               forceExpand: this.forceExpand,
               showArrayIndex: this.showArrayIndex,
+              showDoubleQuotes: this.showDoubleQuotes,
+              path: `${this.path}.${key}`
             }
           }))
         }

package.json

@@ -1,9 +1,13 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "description": "vuejs展示json的组件",
   "main": "vue-json-viewer.js",
-  "files": ["vue-json-viewer.js", "ssr.js", "style.css"],
+  "files": [
+    "vue-json-viewer.js",
+    "ssr.js",
+    "style.css"
+  ],
   "directories": {
     "lib": "./lib",
     "example": "./example"
@@ -18,7 +22,10 @@
     "type": "git",
     "url": "git+https://github.com/chenfengjw163/vue-json-viewer.git"
   },
-  "keywords": ["vue", "json"],
+  "keywords": [
+    "vue",
+    "json"
+  ],
   "homepage": "https://github.com/chenfengjw163/vue-json-viewer#readme",
   "author": {
     "name": "陈峰",
@@ -77,5 +84,8 @@
   },
   "peerDependencies": {
     "vue": "^2.6.9"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   }
-}
+}