整体结构更新，版本提升至1.1.0，props 增加 path，增加 click 事件

Author: leezng

README.md

@@ -1,27 +1,48 @@
 # vue-json-pretty
 
-> A Vue.js project
+A Vue.js project for json-pretty. [leezng/vue-json-pretty](https://github.com/leezng/vue-json-pretty)
 
-## Build Setup
+## Installation
 
-``` bash
-# install dependencies
-npm install
+```js
+npm install vue-json-pretty
+```
+
+## Usage
+
+```html
+<template>
+  <div>
+    ...
+    <vue-json-pretty
+      :path="'res'"
+      :data="{ key: 'value' }"
+      @click="handleClick">
+    </vue-json-pretty>
+  </div>
+</template>
+```
 
-# serve with hot reload at localhost:8080
-npm run dev
+```js
+import VueJsonPretty from 'vue-json-pretty'
 
-# build for production with minification
-npm run build
+export default {
+  components: {
+    VueJsonPretty
+  }
+}
+```
 
-# build for production and view the bundle analyzer report
-npm run build --report
+## Props
 
-# run e2e tests
-npm run e2e
+| Attribute | Description | Type | Default |
+|-------- |-------- |-------- | -------- |
+| data | json data | string, array, object | - |
+| path | root data path | string | root |
 
-# run all tests
-npm test
-```
+## Events
+
+| Event Name | Description | Callback Parameters |
+|---------- |-------- |---------- |
+| click  | triggered when a data item is clicked | (path, data) |
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

example/App.vue

@@ -1,16 +1,20 @@
 <template>
-  <div id="app">
-    <tree :data="data"></tree>
+  <div id="app" class="example-app">
+    <vue-json-pretty :data="data" :path="'res'" @click="handleClick"></vue-json-pretty>
+    <div class="result">
+      <div>path: {{itemPath}}</div>
+      <div>data: <pre>{{itemData}}</pre></div>
+    </div>
   </div>
 </template>
 
 <script>
-import Tree from 'src/components/tree'
+import VueJsonPretty from 'src/components/tree'
 
 export default {
   name: 'app',
   components: {
-    Tree
+    VueJsonPretty
   },
   data () {
     return {
@@ -19,9 +23,45 @@ export default {
         b: [{
           a: 1,
           b: 2
-        }]
-      }
+        }, {
+          a: 'abcde',
+          b: true
+        }],
+        c: {
+          a: null,
+          b: 2
+        }
+      },
+      itemData: {},
+      itemPath: ''
+    }
+  },
+  methods: {
+    handleClick (path, data) {
+      this.itemPath = path
+      this.itemData = data
     }
   }
 }
 </script>
+
+<style lang="less">
+  .example-app {
+    padding: 30px;
+    > div {
+      float: left;
+      padding: 15px;
+      width: 50%;
+      min-height: 300px;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+    }
+    .result {
+      font-family: Consolas;
+      pre {
+        margin: 0;
+        font-family: inherit;
+      }
+    }
+  }
+</style>

package.json

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

src/components/brackets-left.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <slot></slot>
+    <span
+      v-show="dataVisiable"
+      class="vjs__tree__node"
+      @click.stop="dataVisiable = !dataVisiable">
+      {{ Array.isArray(data) ? '[' : '{' }}
+    </span>
+    <span
+      v-show="!dataVisiable"
+      :class="{
+        'vjs__tree__node': true,
+        'vjs__not__lastIndex': index !== lastIndex
+      }"
+      @click.stop="dataVisiable = !dataVisiable">{{ Array.isArray(data) ? '[...]' : '{...}' }}</span>
+  </div>
+</template>
+
+<script>
+  import bracketsMixin from 'src/mixins/brackets-mixin'
+
+  export default {
+    mixins: [bracketsMixin]
+  }
+</script>

src/components/brackets-right.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-show="dataVisiable">
+    <span
+      :class="{
+        'vjs__tree__node': true,
+        'vjs__not__lastIndex': index !== lastIndex }"
+      @click.stop="dataVisiable = !dataVisiable">{{ Array.isArray(data) ? ']' : '}' }}</span>
+  </div>
+</template>
+
+<script>
+  import bracketsMixin from 'src/mixins/brackets-mixin'
+
+  export default {
+    mixins: [bracketsMixin]
+  }
+</script>

src/components/tree-child.vue

@@ -1,75 +1,95 @@
 <template>
   <div class="vjs__tree">
-    <span v-if="!child && show" class="vjs__tree__node" @click="toggle">{{ isArray(json) ? '[' : '{' }}</span>
-    <span v-show="!show" class="vjs__tree__node" @click.stop="toggle">
-      {{ isArray(json) ? '[...]' : '{...}' }}
-    </span>
+    <brackets-left
+      :visiable.sync="visiable"
+      :data="data"
+      :index="index"
+      :last-index="lastIndex">
+      <span v-if="child && Array.isArray(data)">{{ index }}:</span>
+    </brackets-left>
 
+    <!-- data 为对象时, index 表示 key, 为数组才表示索引 -->
     <div
-      v-for="(item, index) in json"
-      v-show="show"
+      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="getItemData">
-      <tree-child
-        v-if="isArray(item) || isObject(item)"
+      @click.stop="handleClick">
+      <tree
+        v-if="Array.isArray(item) || isObject(item)"
+        :data="item"
+        :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
         :index="index"
-        :data="json"
-        :item="item">
-        <tree
-          :data="item"
-          :child="true"
-          :path="path + (isArray(json) ? `[${index}]` : `.${index}`)">
-        </tree>
-      </tree-child>
+        :last-index="getLastIndex()"
+        :child="true"
+        @click="handleItemClick">
+      </tree>
 
-      <div v-else :class="{ 'vjs__lastIndex': index !== lastIndex }" >
-        <span v-if="isObject(json)">{{ index }}:</span>
+      <div v-else :class="{ 'vjs__not__lastIndex': index !== getLastIndex() }" >
+        <span v-if="isObject(data)">{{ index }}:</span>
         <span :class="getValueClass(item)">{{ `${item}` }}</span>
       </div>
     </div>
 
-    <span v-if="!child && show" class="vjs__tree__node" @click.stop="toggle">
-      {{ isArray(json) ? ']' : '}' }}
-    </span>
+    <brackets-right
+      :visiable.sync="visiable"
+      :data="data"
+      :index="index"
+      :last-index="lastIndex">
+    </brackets-right>
   </div>
 </template>
 
 <script>
-  import TreeChild from './tree-child'
-  import mixin from 'src/mixins/mixin'
+  import BracketsLeft from './brackets-left'
+  import BracketsRight from './brackets-right'
 
   export default {
     name: 'tree',
-    mixins: [mixin],
     props: {
       data: {},
       child: Boolean,
       path: {
         type: String,
-        default: 'res'
-      }
+        default: 'root'
+      },
+      index: {},
+      lastIndex: {}
     },
     data () {
       return {
+        visiable: true,
         treeContentBackground: 'transparent'
       }
     },
     components: {
-      TreeChild
-    },
-    computed: {
-      json () {
-        return JSON.parse(JSON.stringify(this.data))
-      }
+      BracketsLeft,
+      BracketsRight
     },
     methods: {
-      getItemData () {
-        console.log('path: ', this.path)
-        console.log('data: ', this.json)
+      // 触发组件的 click 事件
+      handleClick () {
+        this.$emit('click', this.path, this.data)
+      },
+      // 处理子树触发的 click 事件, 并传递到顶层
+      handleItemClick (path, data) {
+        this.$emit('click', path, data)
+      },
+      // 工具函数: 判断是否对象
+      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) {
@@ -97,7 +117,7 @@
         color: #20a0ff;
       }
     }
-    .vjs__lastIndex:after {
+    .vjs__not__lastIndex:after {
       content: ",";
     }
     .vjs__value__null {

src/components/tree.vue

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