feat: Add PreviewMode

History.md

@@ -1,3 +1,7 @@
+## 2.2.14 2020-10-13
+
+- Add Preview Mode 
+
 ## 2.2.14 2020-07-27
 
 - Allow add specific style for float and integer numbers [pr](https://github.com/chenfengjw163/vue-json-viewer/pull/51)

README.md

@@ -153,6 +153,7 @@ import 'vue-json-viewer/style.css'
 | `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() |
+| `preview-mode` | no expand mode | `false` |
 
 ## Listeners
 

README_CN.md

@@ -147,6 +147,7 @@ import 'vue-json-viewer/style.css'
 | `theme` | 添加一个自定义的样式class用作主题 | `jv-light` |
 | `expanded` | 默认展开视图 | `false` |
 | `timeformat` | 自定义时间格式函数 | time => time.toLocaleString() |
+| `preview-mode` | 不可折叠模式，默认全部展开 | `false` |
 
 ## 主题
 

example/app.js

@@ -18,6 +18,17 @@ new Vue({
     }
     return (
       <div>
+        <json-viewer
+          preview-mode
+          value={{
+            data: {
+              data: {
+                data: {
+                  a: 1
+                }
+              }
+            }
+          }}></json-viewer>
         <json-viewer value={this.jsonData}></json-viewer>
         <hr />
         <json-viewer

lib/json-box.vue

@@ -24,7 +24,8 @@ export default {
     depth: {
       type: Number,
       default: 0
-    }
+    },
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -32,7 +33,7 @@ export default {
     }
   },
   mounted() {
-    this.expand = this.depth >= this.expandDepth ? false : true
+    this.expand = this.previewMode || (this.depth >= this.expandDepth ? false : true)
   },
   methods: {
     toggle() {
@@ -71,7 +72,7 @@ export default {
     }
     const toggle = this.keyName && (this.value && (Array.isArray(this.value) || (typeof this.value === 'object' && Object.prototype.toString.call(this.value) !== '[object Date]')))
 
-    if (toggle) {
+    if (!this.previewMode && toggle) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -103,7 +104,8 @@ export default {
         keyName: this.keyName,
         sort: this.sort,
         depth: this.depth,
-        expand: this.expand
+        expand: this.expand,
+        previewMode: this.previewMode,
       },
       on: {
         'update:expand': value => {
@@ -115,7 +117,7 @@ export default {
     return h('div', {
       class: {
         'jv-node': true,
-        'toggle': toggle
+        'toggle': !this.previewMode && toggle
       }
     }, elements)
   }

lib/json-viewer.vue

@@ -25,6 +25,7 @@
         ref="jsonBox"
         :value="value"
         :sort="sort"
+        :preview-mode="previewMode"
       />
     </div>
     <div 
@@ -83,6 +84,10 @@ export default {
     timeformat: {
       type: Function,
       default: value => value.toLocaleString(),
+    },
+    previewMode: {
+      type: Boolean,
+      default: false,
     }
   },
   provide () {

lib/types/json-array.vue

@@ -17,7 +17,8 @@ export default {
       default: 0
     },
     sort: Boolean,
-    expand: Boolean
+    expand: Boolean,
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -61,7 +62,7 @@ export default {
   render (h) {
     let elements = []
 
-    if (!this.keyName) {
+    if (!this.previewMode && !this.keyName) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -94,6 +95,7 @@ export default {
             // keyName: key,
             depth: this.depth + 1,
             value,
+            previewMode: this.previewMode,
           }
         }))
       })

lib/types/json-object.vue

@@ -17,7 +17,8 @@ export default {
       default: 0
     },
     expand: Boolean,
-    sort: Boolean
+    sort: Boolean,
+    previewMode: Boolean,
   },
   data() {
     return {
@@ -69,7 +70,7 @@ export default {
   render (h) {
     let elements = []
 
-    if (!this.keyName) {
+    if (!this.previewMode && !this.keyName) {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
@@ -106,6 +107,7 @@ export default {
               keyName: key,
               depth: this.depth + 1,
               value,
+              previewMode: this.previewMode,
             }
           }))
         }

package.json

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