add ability to use a custom formatter for values

Author: blackmad

example/App.vue

@@ -27,6 +27,10 @@
           <div>
             <label>collapsedOnClickBrackets</label>
             <input type="checkbox" v-model="collapsedOnClickBrackets">
+          </div>
+            <div>
+            <label>use custom link formatter</label>
+            <input type="checkbox" v-model="useCustomLinkFormatter">
           </div>
           <div>
             <label>deep</label>
@@ -48,6 +52,7 @@
           :show-line="showLine"
           :highlight-mouseover-node="highlightMouseoverNode"
           :collapsed-on-click-brackets="collapsedOnClickBrackets"
+          :custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
           @click="handleClick">
         </vue-json-pretty>
       </div>
@@ -169,7 +174,8 @@ export default {
         }, {
           news_id: 51183,
           title: 'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
-          source: 'Netease smart'
+          source: 'Netease smart',
+          link: 'http://netease.smart/traffic-paradise/1235'
         }, {
           news_id: 51182,
           title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
@@ -187,6 +193,7 @@ export default {
       highlightSelectedNode: true,
       selectOnClickNode: true,
       collapsedOnClickBrackets: true,
+      useCustomLinkFormatter: false,
       path: 'res',
       deep: 3,
       itemData: {},
@@ -228,6 +235,16 @@ export default {
     },
     handleChange (newVal, oldVal) {
       console.log('newVal: ', newVal, ' oldVal: ', oldVal)
+    },
+    customLinkFormatter(data) {
+      console.log(data)
+      console.log(data.startsWith('http://'))
+      console.log(data.startsWith('http'))
+      if (data.startsWith('http://')) {
+        return `<a style="color:red;" href="${data}">"${data}"</a>`;
+      } else {
+        return null;
+      }
     }
   }
 }

src/components/app.vue

@@ -55,6 +55,7 @@
           :collapsed-on-click-brackets="collapsedOnClickBrackets"
           :current-key="key"
           :current-deep="currentDeep + 1"
+          :custom-value-formatter="customValueFormatter"
           @click="handleItemClick"
           @change="handleItemChange">
         </vue-json-pretty>
@@ -71,6 +72,7 @@
 
     <simple-text
       v-else
+      :custom-value-formatter="customValueFormatter"
       :show-double-quotes="showDoubleQuotes"
       :show-comma="notLastKey"
       :parent-data="parentData"
@@ -172,6 +174,11 @@
         type: Boolean,
         default: true
       },
+      // custom formatter for values
+      customValueFormatter: {
+        type: Function,
+        default: null
+      },
       /* outer props */
 
       /* inner props */

src/components/simple-text.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <slot></slot>
-    <span :class="`vjs-value vjs-value__${dataType}`">
-      {{ textFormatter(data) }}
-    </span>
+    <span :class="`vjs-value vjs-value__${dataType}`" v-html="textFormatter(data)"/>
   </div>
 </template>
 
@@ -16,7 +14,8 @@
       parentData: {},
       data: {},
       showComma: Boolean,
-      currentKey: [Number, String]
+      currentKey: [Number, String],
+      customValueFormatter: Function
     },
     computed: {
       // 当前数据类型
@@ -30,11 +29,22 @@
       }
     },
     methods: {
-      textFormatter (data) {
+      defaultFormatter (data) {
         let text = data + ''
         if (this.dataType === 'string') text = `"${text}"`
         if (this.showComma) text += ','
         return text
+      },
+
+      textFormatter (data) {
+        if (this.customValueFormatter) {
+          console.log(this.customValueFormatter)
+          return this.customValueFormatter(
+            data, this.currentKey, this.parentData
+          ) || this.defaultFormatter(data)
+        } else {
+          return this.defaultFormatter(data)
+        }
       }
     }
   }