add support for 'function' values in json objects

README.md

@@ -4,19 +4,19 @@ Simple json display component,  based on vue
 
 ## Installing:
 Using npm:
-``` 
+```
 $ npm install vue-json-viewer
 ```
 Using bower:
 
 
-``` 
+```
 $ yarn add vue-json-viewer
 ```
 
 ## Example:
 
-``` html 
+``` html
 <json-viewer :value="jsonData" :show-copy="true" icon-prefix="ion" :show-bigger="true"></json-viewer>
 ```
 
@@ -31,6 +31,7 @@ export default {
           {key: 'hello word'},
         ],
         val: {
+          c: () = {},
           b: 'a',
           a: 'hello word',
           asd2: 1,
@@ -42,12 +43,12 @@ export default {
 }
 ```
 ## Result:
-![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png) 
+![ABC](http://oxqqtdux0.bkt.clouddn.com/WX20180702-172158.png)
 
 
 ## Options:
 
-| Property         | Description           | 
+| Property         | Description           |
 | ----------- |:-------------|
 | value       | json data |
 | show-copy   | display the copy button |

examples/app.js

@@ -12,6 +12,7 @@ new Vue({
                   {key: 'hello word'},
                 ],
                 val: {
+                  c: () = {},
                   b: 'a',
                   a: 'hello word',
                   asd2: 1,
@@ -21,4 +22,4 @@ new Vue({
         }
     },
     components: {JsonViewer}
-})
+})

json-box.vue

@@ -15,6 +15,7 @@ import JsonNumber from './types/json-number';
 import JsonBoolean from './types/json-boolean';
 import JsonObject from './types/json-object';
 import JsonArray from './types/json-array';
+import JsonFunction from './types/json-function';
 
 export default {
     name: 'JsonBox',
@@ -44,6 +45,8 @@ export default {
                 return 'String';
             } else if (typeof this.value === 'boolean') {
                 return 'Boolean';
+            } else if (typeof this.value === 'function') {
+                return 'Function';
             }
         },
         isObject() {

types/json-function.vue

@@ -0,0 +1,18 @@
+<template>
+    <span class="json-function">&lt;function&gt;</span>
+</template>
+
+<script>
+export default {
+    name: 'JsonFunction',
+    props: {
+        jsonValue: Function
+    }
+};
+</script>
+
+<style lang="scss">
+.json-function {
+    color: #067bca;
+}
+</style>