highlight links & fix some issue

example/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import JsonViewer from '../vue-json-viewer'
+import JsonViewer from '../lib'
 
 Vue.use(JsonViewer)
 
@@ -34,6 +34,7 @@ new Vue({
           {
             id: '5968fcad629fa84ab65a5247',
             firstname: 'Ada',
+            link: 'http://google.com',
             lastname: 'Lovelace',
             awards: null,
             known: [

lib/json-viewer.vue

@@ -8,7 +8,6 @@
         ref="clip" 
         class="jv-button"
         :class="{copied}"
-        @click="clip" 
       >{{ copied ? 'copied!' : 'copy' }}</span>
     </div>
     <div 
@@ -97,6 +96,16 @@ export default {
       this.onResized()
       this.$refs.jsonBox.$el.addEventListener("resized", this.onResized, true)
     }
+    if (this.copyable) {
+      const clipBoard = new Clipboard(this.$refs.clip, {
+        text: () => {
+          return JSON.stringify(this.value, null, 2)
+        }
+      });
+      clipBoard.on('success', () => {
+        this.onCopied()
+      })
+    }
   },
   methods: {
     onResized () {
@@ -108,25 +117,15 @@ export default {
         }
       })
     },
-    clip () {
+    onCopied() {
       if (this.copied) {
-        return
+        return;
       }
-
+      this.copied = true
-      const clipBoard = new Clipboard(this.$refs.clip, {
+      setTimeout(() => {
-        text: () => {
+        this.copied = false
-          return JSON.stringify(this.value, null, 2)
+      }, 2000)
-        }
+      this.$emit('copied')
-      })
-
-      clipBoard.on('success', () => {
-        this.copied = true
-        setTimeout(() => {
-          this.copied = false
-        }, 2000)
-        this.$emit('copied')
-        clipBoard.destroy()
-      })
     },
     toggleExpandCode () {
       this.expandCode = !this.expandCode

lib/types/json-object.vue

@@ -26,7 +26,7 @@ export default {
       }
 
       const ordered = {}
-      Object.keys(this.jsonValue).sort().forEach(key => {
+      Object.keys(this.jsonValue).forEach(key => {
         ordered[key] = this.jsonValue[key]
       })
       return ordered

lib/types/json-string.vue

@@ -1,4 +1,6 @@
 <script>
+const REG_LINK = /^\w+:\/\//;
+
 export default {
   name: 'JsonString',
   functional: true,
@@ -9,13 +11,19 @@ export default {
     }
   },
   render (h, { props }) {
+    let value = props.jsonValue;
+    
+    if (REG_LINK.test(value)) {
+      value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+    }
+
     return h('span', {
       class: {
         'jv-item': true,
         'jv-string': true,
       },
       domProps: {
-        innerHTML: `"${props.jsonValue.toString()}"`
+        innerHTML: `"${value.toString()}"`
       }
     })
   }

package.json

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