feat: support long string expand

History.md

@@ -1,4 +1,8 @@
-## 2.2.14 2020-10-13
+## 2.2.16 2020-11-13
+
+- support long string expand [issues](https://github.com/chenfengjw163/vue-json-viewer/issues/60)
+
+## 2.2.15 2020-10-13
 
 - Add Preview Mode 
 

lib/types/json-string.vue

@@ -3,38 +3,84 @@ const REG_LINK = /^\w+:\/\//;
 
 export default {
   name: 'JsonString',
-  functional: true,
   props: {
     jsonValue: {
       type: String,
       required: true
     }
   },
-  render (h, { props }) {
+  data() {
-    let value = props.jsonValue;
+    return {
+      expand: false,
+      canExtend: false,
+    }
+  },
+  mounted() {
+    if (this.$refs.itemRef.offsetHeight > this.$refs.holderRef.offsetHeight) {
+      this.canExtend = true;
+    }
+  },
+  methods: {
+    toggle() {
+      this.expand = !this.expand;
+    }
+  },
+  render (h) {
+    let value = this.jsonValue;
     const islink = REG_LINK.test(value)
-    let domProps
+    let domItem
 
-    if (islink) {
+    if (this.expand) {
-      value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+      domItem = {
-      domProps = {
+        class: {
-        innerHTML: `"${value.toString()}"`
+          'jv-ellipsis': true,
-      }
+        },
+        on: {
+          click: this.toggle
+        },
+        domProps: {
+          innerText: '...'
+        }
+      };
     } else {
-      domProps = {
+      domItem = {
-        innerText: `"${value.toString()}"`
+        class: {
+          'jv-item': true,
+          'jv-string': true,
+        },
+        ref: 'itemRef',
+      }
+      if (islink) {
+        value = `<a href="${value}" target="_blank" style="color: #0366d6;">${value}</a>`;
+        domItem.domProps = {
+          innerHTML: `"${value.toString()}"`
+        }
+      } else {
+        domItem.domProps = {
+          innerText: `"${value.toString()}"`
+        }
       }
     }
     
-    return h('span', {
+
-      class: {
+    return h('span', {}, [
-        'jv-item': true,
+      this.canExtend && h('span', {
-        'jv-string': true,
+        class: {
-      },
+          'jv-toggle': true,
-      domProps: {
+          open: this.expand,
-        ...domProps
+        },
-      }
+        on: {
-    })
+          click: this.toggle,
+        }
+      }),
+      h('span', {
+        class: {
+          'jv-holder-node': true,
+        },
+        ref: 'holderRef'
+      }),
+      h('span', domItem)
+    ])
   }
 }
 </script>

package.json

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