Version updated to 1.2.0

data 增加对简单类型的支持(数字, 布尔, 字符串)
click 事件支持选中对象，也支持选中简单数据，同时悬浮优化，将括号标签并入高亮范围内
内部 props: json 更名为 parentData

Author: leezng

README.md

@@ -37,7 +37,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 |-------- |-------- |-------- | -------- |
-| data | json data | string, array, object | - |
+| data | json data | JSON object | - |
 | path | root data path | string | root |
 
 ## Events

example/App.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="app" class="example-app">
-    <vue-json-pretty :data="data" :path="'res'" @click="handleClick"></vue-json-pretty>
+    <div>
+      <h2>JSON Tree:</h2>
+      <vue-json-pretty :data="data" :path="'res'" @click="handleClick"></vue-json-pretty>
+    </div>
     <div class="result">
+      <h2>Click Result:</h2>
       <div>path: {{itemPath}}</div>
       <div>data: <pre>{{itemData}}</pre></div>
     </div>
@@ -30,7 +34,8 @@ export default {
         c: {
           a: null,
           b: 2
-        }
+        },
+        d: 123456789
       },
       itemData: {},
       itemPath: ''
@@ -39,29 +44,30 @@ export default {
   methods: {
     handleClick (path, data) {
       this.itemPath = path
-      this.itemData = data
+      this.itemData = !data ? data + '' : data // 处理 data = null 的情况
     }
   }
 }
 </script>
 
 <style lang="less">
+  html, body {
+    margin: 0;
+  }
   .example-app {
-    padding: 30px;
     > div {
       float: left;
-      padding: 15px;
+      padding: 0 15px;
       width: 50%;
       min-height: 300px;
-      border: 1px solid #ccc;
       box-sizing: border-box;
+      &:first-child {
+        border-right: 5px double #ccc;
+      }
     }
-    .result {
+    .result pre{
+      margin: 0;
       font-family: Consolas;
-      pre {
-        margin: 0;
-        font-family: inherit;
-      }
     }
   }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-pretty",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A Vue.js project",
   "author": "leezng <[email protected]>",
   "main": "vue-json-pretty.js",

src/components/tree.vue

@@ -1,46 +1,52 @@
 <template>
-  <div class="vjs__tree">
-    <brackets-left
-      :visiable.sync="visiable"
-      :data="data"
-      :index="index"
-      :last-index="lastIndex">
-      <span v-if="child && !Array.isArray(json)">{{ index }}:</span>
-    </brackets-left>
-
-    <!-- data 为对象时, index 表示 key, 为数组才表示索引 -->
-    <div
-      v-for="(item, index) in data"
-      v-show="visiable"
-      class="vjs__tree__content"
-      :style="{ 'background-color': treeContentBackground }"
-      :key="index"
-      @mouseover.stop="treeContentBackground = '#eee'"
-      @mouseout.stop="treeContentBackground = 'transparent'"
-      @click.stop="handleClick">
-      <tree
-        v-if="Array.isArray(item) || isObject(item)"
-        :json="data"
-        :data="item"
-        :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
+  <div
+    class="vjs__tree"
+    :style="{ 'background-color': treeContentBackground }"
+    @click.stop="handleClick"
+    @mouseover.stop="treeContentBackground = '#eee'"
+    @mouseout.stop="treeContentBackground = 'transparent'">
+    <template v-if="Array.isArray(data) || isObject(data)">
+      <!-- 左闭合 -->
+      <brackets-left
+        :visiable.sync="visiable"
+        :data="data"
         :index="index"
-        :last-index="getLastIndex()"
-        :child="true"
-        @click="handleItemClick">
-      </tree>
+        :last-index="lastIndex">
+        <span v-if="child && !Array.isArray(parentData)">{{ index }}:</span>
+      </brackets-left>
 
-      <div v-else :class="{ 'vjs__not__lastIndex': index !== getLastIndex() }" >
-        <span v-if="isObject(data)">{{ index }}:</span>
-        <span :class="getValueClass(item)">{{ `${item}` }}</span>
+      <!-- 数据内容, data 为对象时, index 表示 key, 为数组才表示索引 -->
+      <div
+        v-for="(item, index) in data"
+        v-show="visiable"
+        class="vjs__tree__content"
+        :key="index">
+        <tree
+          :parent-data="data"
+          :data="item"
+          :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
+          :index="index"
+          :child="true"
+          @click="handleItemClick">
+        </tree>
       </div>
-    </div>
 
-    <brackets-right
-      :visiable.sync="visiable"
-      :data="data"
-      :index="index"
-      :last-index="lastIndex">
-    </brackets-right>
+      <!-- 右闭合 -->
+      <brackets-right
+        :visiable.sync="visiable"
+        :data="data"
+        :index="index"
+        :last-index="lastIndex">
+      </brackets-right>
+    </template>
+
+    <template v-else>
+      <div :class="{ 'vjs__not__lastIndex': index !== lastIndex }">
+        <span v-if="isObject(parentData)">{{ index }}:</span>
+        <!-- data 可能为 null, 因此界面展示转为字符串 -->
+        <span :class="getValueClass(data)">{{ data + '' }}</span>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -50,6 +56,10 @@
 
   export default {
     name: 'tree',
+    components: {
+      BracketsLeft,
+      BracketsRight
+    },
     props: {
       /* 外部可用 START */
       data: {}, // 当前树的数据
@@ -59,20 +69,26 @@
         default: 'root'
       },
       /* 外部可用 END */
-      json: {}, // 当前树的父级数据
+      parentData: {}, // 当前树的父级数据
       child: Boolean, // 是否子树
-      index: {},
-      lastIndex: {}
+      index: {}
     },
     data () {
       return {
         visiable: true,
         treeContentBackground: 'transparent'
       }
     },
-    components: {
-      BracketsLeft,
-      BracketsRight
+    computed: {
+      // 获取当前 data 中最后一项的 key 或 索引, 便于界面判断是否添加 ","
+      lastIndex () {
+        if (Array.isArray(this.parentData)) {
+          return this.parentData.length - 1
+        } else if (this.isObject(this.parentData)) {
+          let arr = Object.keys(this.parentData)
+          return arr[arr.length - 1]
+        }
+      }
     },
     methods: {
       // 触发组件的 click 事件
@@ -87,15 +103,6 @@
       isObject (value) {
         return Object.prototype.toString.call(value).slice(8, -1).toLowerCase() === 'object'
       },
-      // 获取当前 data 中最后一项的 key 或 索引, 便于界面判断是否添加 ","
-      getLastIndex () {
-        if (Array.isArray(this.data)) {
-          return this.data.length - 1
-        } else if (this.isObject(this.data)) {
-          let arr = Object.keys(this.data)
-          return arr[arr.length - 1]
-        }
-      },
       getValueClass (value) {
         if (value === null) {
           return 'vjs__value__null'

src/index.js

@@ -1,5 +1,5 @@
 import VueJsonPretty from './components/tree.vue'
 
 export default Object.assign({}, VueJsonPretty, {
-  version: '1.1.1'
+  version: '1.2.0'
 })