feat: add timeformat props

History.md

@@ -0,0 +1,3 @@
+## 2.2.13 2020-07-14
+
+- Add timeformat props to support custom time format [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/48)

README.md

@@ -152,6 +152,7 @@ import 'vue-json-viewer/style.css'
 | `boxed` | Add a fancy "boxed" style to component | `false` |
 | `theme` | Add a custom CSS class for theming purposes | `jv-light` |
 | `expanded` | Default expand the view | `false` |
+| `timeformat` | custom time format function | time => time.toLocaleString() |
 
 ## Listeners
 

README_CN.md

@@ -145,6 +145,8 @@ import 'vue-json-viewer/style.css'
 | `sort` | 按照key排序展示 | `false` |
 | `boxed` | 为组件添加一个盒样式 | `false` |
 | `theme` | 添加一个自定义的样式class用作主题 | `jv-light` |
+| `expanded` | 默认展开视图 | `false` |
+| `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() |
 
 ## 主题
 

example/app.js

@@ -27,6 +27,7 @@ new Vue({
             copiedText: '复制成功'
           }}
           boxed
+          timeformat={time => new Date(time)}
           sort></json-viewer>
         <hr />
         <json-viewer

example/build/webpack.dev.conf.js

@@ -11,7 +11,7 @@ module.exports = {
     },
     devtool: 'cheap-module-source-map',
     devServer: {
-        port: 8081,
+        port: 8082,
         disableHostCheck: true
     },
     resolve: {

lib/json-viewer.vue

@@ -80,10 +80,15 @@ export default {
       type: String,
       default: 'jv-light'
     },
+    timeformat: {
+      type: Function,
+      default: value => value.toLocaleString(),
+    }
   },
   provide () {
     return {
       expandDepth: this.expandDepth,
+      timeformat: this.timeformat,
     }
   },
   data () {
@@ -93,11 +98,6 @@ export default {
       expandCode: this.expanded
     }
   },
-  watch: {
-    value() {
-      this.onResized()
-    }
-  },
   computed: {
     jvClass() {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
@@ -112,6 +112,11 @@ export default {
       }
     }
   },
+  watch: {
+    value() {
+      this.onResized()
+    }
+  },
   mounted: function () {
     this.debounceResized = debounce(this.debResized.bind(this), 200);
     if (this.boxed && this.$refs.jsonBox) {

lib/types/json-array.vue

@@ -3,11 +3,6 @@ import JsonBox from '../json-box'
 
 export default {
   name: 'JsonArray',
-  data() {
-    return {
-      value: []
-    }
-  },
   props: {
     jsonValue: {
       type: Array,
@@ -24,6 +19,11 @@ export default {
     sort: Boolean,
     expand: Boolean
   },
+  data() {
+    return {
+      value: []
+    }
+  },
   watch: {
     jsonValue(newVal) {
       this.setValue(newVal);

lib/types/json-date.vue

@@ -1,6 +1,7 @@
 <script>
 export default {
   name: 'JsonDate',
+  inject: ['timeformat'],
   functional: true,
   props: {
     jsonValue: {
@@ -8,8 +9,9 @@ export default {
       required: true
     }
   },
-  render (h, { props }) {
+  render (h, { props, injections }) {
     const value = props.jsonValue;
+    const timeformat = injections.timeformat;
 
     return h('span', {
       class: {
@@ -17,7 +19,7 @@ export default {
         'jv-string': true,
       },
       domProps: {
-        innerText: `"${value.toLocaleString()}"`
+        innerText: `"${timeformat(value)}"`
       }
     })
   }

lib/types/json-object.vue

@@ -3,11 +3,6 @@ import JsonBox from '../json-box'
 
 export default {
   name: 'JsonObject',
-  data() {
-    return {
-      value: {}
-    }
-  },
   props: {
     jsonValue: {
       type: Object,
@@ -24,6 +19,11 @@ export default {
     expand: Boolean,
     sort: Boolean
   },
+  data() {
+    return {
+      value: {}
+    }
+  },
   computed: {
     ordered () {
       if (!this.sort) {

package.json

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