bugfix #5 Commas and quotes missing when selected

Author: leezng

src/assets/less/tree.less

@@ -13,9 +13,6 @@
       color: #20a0ff;
     }
   }
-  .vjs__not__lastIndex:after {
-    content: ",";
-  }
   .vjs-checkbox {
     position: absolute;
     left: -30px;
@@ -29,9 +26,5 @@
   }
   .vjs__value__string {
     color: #13ce66;
-    &:before,
-    &:after {
-      content: "\""
-    }
   }
 }

src/components/app.vue

@@ -18,26 +18,25 @@
       <brackets-left
         :visiable.sync="visiable"
         :data="data"
-        :index="index"
-        :last-index="lastIndex">
-        <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ index }}:</span>
+        :not-last-key="notLastKey">
+        <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ currentKey }}:</span>
       </brackets-left>
 
-      <!-- 数据内容, data 为对象时, index 表示 key, 为数组才表示索引 -->
+      <!-- 数据内容, data 为对象时, key 表示键名, 为数组时表示索引 -->
       <div
-        v-for="(item, index) in data"
+        v-for="(item, key) in data"
         v-show="visiable"
         class="vjs__tree__content"
-        :key="index">
+        :key="key">
         <vue-json-pretty
           :parent-data="data"
           :data="item"
           :deep="deep"
-          :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
+          :path="path + (Array.isArray(data) ? `[${key}]` : `.${key}`)"
           :path-checked="pathChecked"
           :path-selectable="pathSelectable"
           :selectable-type="selectableType"
-          :index="index"
+          :current-key="key"
           :current-deep="currentDeep + 1"
           @click="handleItemClick">
         </vue-json-pretty>
@@ -47,29 +46,31 @@
       <brackets-right
         :visiable.sync="visiable"
         :data="data"
-        :index="index"
-        :last-index="lastIndex">
+        :not-last-key="notLastKey">
       </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>
+    <simple-text
+      v-else
+      :parentDataType="getDataType(parentData)"
+      :dataType="getDataType(data)"
+      :text="data + ''"
+      :notLastKey="notLastKey"
+      :currentKey="currentKey">
+    </simple-text>
   </div>
 </template>
 
 <script>
+  import SimpleText from './simple-text'
   import Checkbox from './checkbox'
   import BracketsLeft from './brackets-left'
   import BracketsRight from './brackets-right'
 
   export default {
     name: 'vue-json-pretty',
     components: {
+      SimpleText,
       Checkbox,
       BracketsLeft,
       BracketsRight
@@ -112,7 +113,8 @@
         type: Number,
         default: 1
       },
-      index: {}
+      // 当前树的数据 data 为数组时 currentKey 表示索引, 为对象时表示键名
+      currentKey: [Number, String]
     },
     data () {
       return {
@@ -123,14 +125,18 @@
     },
     computed: {
       // 获取当前 data 中最后一项的 key 或 索引, 便于界面判断是否添加 ","
-      lastIndex () {
+      lastKey () {
         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]
         }
       },
+      // 是否不是最后一项
+      notLastKey () {
+        return this.currentKey !== this.lastKey
+      },
       // 当前的树是否支持选中功能
       selectable () {
         return this.pathSelectable(this.path, this.data)
@@ -167,21 +173,12 @@
       },
       // 工具函数: 判断是否对象
       isObject (value) {
-        return Object.prototype.toString.call(value).slice(8, -1).toLowerCase() === 'object'
+        return this.getDataType(value) === 'object'
       },
-      // 简单类型数据添加 class, 定义样式
-      getValueClass (value) {
-        let dataType = Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
+      // 获取数据类型
+      getDataType (value) {
         // 若使用 typeof 会影响 webpack 压缩后体积变大
-        switch (dataType) {
-          case 'null':
-          case 'string':
-          case 'number':
-          case 'boolean':
-            return `vjs__value__${dataType}`
-          default:
-            return ''
-        }
+        return Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
       }
     }
   }

src/components/brackets-left.vue

@@ -9,11 +9,10 @@
     </span>
     <span
       v-show="!dataVisiable"
-      :class="{
-        'vjs__tree__node': true,
-        'vjs__not__lastIndex': index !== lastIndex
-      }"
-      @click.stop="dataVisiable = !dataVisiable">{{ Array.isArray(data) ? '[...]' : '{...}' }}</span>
+      class="vjs__tree__node"
+      @click.stop="dataVisiable = !dataVisiable">
+      {{ bracketsFormatter(Array.isArray(data) ? '[...]' : '{...}') }}
+    </span>
   </div>
 </template>
 

src/components/brackets-right.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-show="dataVisiable">
     <span
-      :class="{
-        'vjs__tree__node': true,
-        'vjs__not__lastIndex': index !== lastIndex }"
-      @click.stop="dataVisiable = !dataVisiable">{{ Array.isArray(data) ? ']' : '}' }}</span>
+      class="vjs__tree__node"
+      @click.stop="dataVisiable = !dataVisiable">
+      {{ bracketsFormatter(Array.isArray(data) ? ']' : '}') }}
+    </span>
   </div>
 </template>
 

src/components/simple-text.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <span v-if="parentDataType === 'object'">{{ currentKey }}:</span>
+    <span :class="`vjs__value__${dataType}`">
+      {{ textFormatter(text) }}
+    </span>
+    <!-- <span v-if="notLastKey">,</span> -->
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      parentDataType: String, // 父级数据类型
+      dataType: String, // 当前 text 数据类型
+      text: String,
+      notLastKey: Boolean,
+      currentKey: [Number, String]
+    },
+    methods: {
+      textFormatter (text) {
+        let output = text
+        if (this.dataType === 'string') output = `"${output}"`
+        if (this.notLastKey) output += ','
+        return output
+      }
+    }
+  }
+</script>

src/mixins/brackets-mixin.js

@@ -7,8 +7,7 @@ export default {
     data: {
       required: true
     },
-    index: [Number, String],
-    lastIndex: [Number, String]
+    notLastKey: Boolean
   },
   computed: {
     dataVisiable: {
@@ -19,5 +18,10 @@ export default {
         this.$emit('update:visiable', val)
       }
     }
+  },
+  methods: {
+    bracketsFormatter (brackets) {
+      return this.notLastKey ? `${brackets},` : brackets
+    }
   }
 }