Fixed showLength attribute performance error, and add radio select mode(single select).

Author: leezng

example/App.vue

@@ -26,10 +26,11 @@
         <h3>Options</h3>
         <div class="options">
           <div>
-            <label>selectable-type</label>
+            <label>selectableType</label>
             <select v-model="selectableType">
               <option>-</option>
               <option>checkbox</option>
+              <option>radio</option>
             </select>
           </div>
           <div>
@@ -64,17 +65,19 @@
       </div>
       <div class="block">
         <h3>JSON Tree:</h3>
+        {{value}}
         <vue-json-pretty
+          v-if="renderOK"
           :data="json"
           :path="path"
           :deep="deep"
           :show-double-quotes="showDoubleQuotes"
           :show-mouse-over="showMouseOver"
           :show-length="showLength"
-          v-model="pathSelected"
+          v-model="value"
           :path-selectable="((path, data) => typeof data !== 'number')"
           :selectable-type="selectableType"
-          @click="handleClick"
+          @click="handleClick(...arguments, 'complexTree')"
           @change="handleChange">
         </vue-json-pretty>
       </div>
@@ -93,6 +96,7 @@ export default {
   },
   data () {
     return {
+      renderOK: true,
       val: '',
       data: {
         status: 200,
@@ -109,11 +113,11 @@ export default {
           news_id: 51182,
           title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
           source: 'AI Finance',
-          members: ['Daniel, Mike, John']
+          members: ['Daniel', 'Mike', 'John']
         }]
       },
-      pathSelected: ['res', 'res.error'],
-      selectableType: 'checkbox',
+      value: 'res.error',
+      selectableType: 'radio',
       showLength: true,
       showDoubleQuotes: true,
       showMouseOver: true,
@@ -126,6 +130,20 @@ export default {
   created () {
     this.val = JSON.stringify(this.data)
   },
+  watch: {
+    selectableType (newVal) {
+      this.renderOK = false
+      if (newVal === 'radio') {
+        this.value = 'res.error'
+      } else if (newVal === 'checkbox') {
+        this.value = ['res', 'res.error']
+      }
+      // 重新渲染, 因为2中情况的v-model格式不同
+      this.$nextTick(() => {
+        this.renderOK = true
+      })
+    }
+  },
   computed: {
     json () {
       try {
@@ -137,8 +155,8 @@ export default {
     }
   },
   methods: {
-    handleClick (path, data) {
-      console.log('click: ', path, data)
+    handleClick (path, data, treeName = '') {
+      console.log('click: ', path, data, treeName)
       this.itemPath = path
       this.itemData = !data ? data + '' : data // 处理 data = null 的情况
     },

src/assets/less/index.less

@@ -1,2 +1,3 @@
 @import "./checkbox.less";
+@import "./radio.less";
 @import "./tree.less";

src/components/app.vue

@@ -1,16 +1,18 @@
 <template>
   <div
-    class="vjs__tree"
-    :style="{
-      'background-color': treeContentBackground,
-      'position': currentDeep > 1 ? '' : 'relative',
-      'margin-left': currentDeep === 1 && existCheckbox ? '30px' : ''
+    :class="{
+      'vjs-tree': true,
+      'has-selectable-control': existCheckbox || existRadio,
+      'is-root': currentDeep === 1,
+      'is-selectable': selectable,
+      'is-mouseover': isMouseover
     }"
     @click.stop="handleClick($event)"
     @mouseover.stop="handleMouseover"
     @mouseout.stop="handleMouseout">
-    <template v-if="selectable && existCheckbox" class="vjs-checkbox">
-      <checkbox v-model="checkboxVal" @change="handleClick($event, true)"></checkbox>
+    <template v-if="selectable">
+      <vue-checkbox v-if="existCheckbox" v-model="currentCheckboxVal" @change="handleClick($event, 'checkbox')"></vue-checkbox>
+      <vue-radio v-else-if="existRadio" v-model="model" @change="handleClick($event, 'radio')" :path="path"></vue-radio>
     </template>
 
     <template v-if="Array.isArray(data) || isObject(data)">
@@ -19,18 +21,18 @@
         :visible.sync="visible"
         :data="data"
         :show-length="showLength"
-        :not-last-key="notLastKey">
+        :show-comma="notLastKey">
         <span v-if="currentDeep > 1 && !Array.isArray(parentData)">{{ keyFormatter(currentKey) }}:</span>
       </brackets-left>
 
       <!-- 数据内容, data 为对象时, key 表示键名, 为数组时表示索引 -->
       <div
         v-for="(item, key) in data"
         v-show="visible"
-        class="vjs__tree__content"
+        class="vjs-tree__content"
         :key="key">
         <vue-json-pretty
-          v-model="value"
+          v-model="model"
           :parent-data="data"
           :data="item"
           :deep="deep"
@@ -51,38 +53,41 @@
       <brackets-right
         :visible.sync="visible"
         :data="data"
-        :not-last-key="notLastKey">
+        :show-comma="notLastKey">
       </brackets-right>
     </template>
 
     <simple-text
       v-else
       :show-double-quotes="showDoubleQuotes"
-      :parent-data-type="getDataType(parentData)"
-      :data-type="getDataType(data)"
-      :text="data + ''"
-      :not-last-key="notLastKey"
-      :currentKey="currentKey">
+      :show-comma="notLastKey"
+      :parent-data="parentData"
+      :data="data"
+      :current-key="currentKey">
+      <span v-if="!Array.isArray(parentData)">{{ keyFormatter(currentKey) }}:</span>
     </simple-text>
   </div>
 </template>
 
 <script>
   import SimpleText from './simple-text'
-  import Checkbox from './checkbox'
+  import VueCheckbox from './checkbox'
+  import VueRadio from './radio'
   import BracketsLeft from './brackets-left'
   import BracketsRight from './brackets-right'
+  import { getDataType } from 'src/utils'
 
   export default {
     name: 'vue-json-pretty',
     components: {
       SimpleText,
-      Checkbox,
+      VueCheckbox,
+      VueRadio,
       BracketsLeft,
       BracketsRight
     },
     props: {
-      /* 外部可用 START */
+      /* outer props */
       // 当前树的数据
       data: {},
       // 定义树的深度, 大于该深度的子树将不被展开
@@ -115,19 +120,20 @@
         type: String,
         default: '' // radio, checkbox
       },
-      // 存在选择功能时，定义已选中的数据层级
+      // 存在选择功能时, 定义已选中的数据层级
+      //    多选时为数组['root.a', 'root.b'], 单选时为字符串'root.a'
       value: {
-        type: Array,
-        default: () => []
+        type: [Array, String],
+        default: () => ''
       },
       // 定义某个数据层级是否支持选中操作
       pathSelectable: {
         type: Function,
         default: () => true
       },
-      /* 外部可用 END */
+      /* outer props */
 
-      /* 内部使用 */
+      /* inner props */
       // 当前树的父级数据
       parentData: {},
       // 当前树的深度, 以根节点作为0开始, 所以第一层树的深度为1, 递归逐次递增
@@ -137,18 +143,26 @@
       },
       // 当前树的数据 data 为数组时 currentKey 表示索引, 为对象时表示键名
       currentKey: [Number, String]
+      /* outer props */
     },
     data () {
       return {
         visible: this.currentDeep <= this.deep,
-        treeContentBackground: 'transparent',
-        checkboxVal: this.value.includes(this.path) // 复选框的值
+        isMouseover: false,
+        currentCheckboxVal: Array.isArray(this.value) ? this.value.includes(this.path) : false
       }
     },
     computed: {
-      model () {
-        return this.value || []
+      model: {
+        get () {
+          const defaultVal = this.selectableType === 'checkbox' ? [] : this.selectableType === 'radio' ? '' : null
+          return this.value || defaultVal
+        },
+        set (val) {
+          this.$emit('input', val)
+        }
       },
+
       // 获取当前 data 中最后一项的 key 或 索引, 便于界面判断是否添加 ","
       lastKey () {
         if (Array.isArray(this.parentData)) {
@@ -158,63 +172,75 @@
           return arr[arr.length - 1]
         }
       },
+
       // 是否不是最后一项
       notLastKey () {
         return this.currentKey !== this.lastKey
       },
+
       // 当前的树是否支持选中功能
       selectable () {
         return this.pathSelectable(this.path, this.data)
       },
+
       // 存在复选框
       existCheckbox () {
         return this.selectableType === 'checkbox'
+      },
+
+      existRadio () {
+        return this.selectableType === 'radio'
       }
     },
     methods: {
       /**
-       * 触发组件的 click 事件
-       * @param  {Boolean} fromSelect 是否来自复选框的事件
+       * emit click event
+       * @param  {Boolean} emitType
        */
-      handleClick (e, fromSelect = false) {
-        // 由于 checkbox 也依赖该函数, 因此通过 fromSelect 进行排除
+      handleClick (e, emitType = '') {
         this.$emit('click', this.path, this.data)
-        if (fromSelect) {
+        if (emitType === 'checkbox') {
           const index = this.model.findIndex(item => item === this.path)
           if (index !== -1) {
             this.model.splice(index, 1)
           } else {
             this.model.push(this.path)
           }
-          this.$emit('input', this.model)
-          this.$emit('change', this.checkboxVal)
+          this.$emit('change', this.currentCheckboxVal)
+        } else if (emitType === 'radio') {
+          if (this.model !== this.path) {
+            this.model = this.path
+            this.$emit('change', this.model)
+          }
         }
       },
-      // 处理子树触发的 click 事件, 并传递到顶层
-      handleItemClick (path, data, checked) {
-        this.$emit('click', path, data, checked)
+
+      // handle children's click, and propagation
+      handleItemClick (path, data) {
+        this.$emit('click', path, data)
       },
+
+      // handle children's change, and propagation
       handleItemChange (val) {
         // 不存在选择的时候change事件无意义
         if (this.existCheckbox) {
           this.$emit('change', val)
         }
       },
+
       handleMouseover () {
-        this.showMouseOver && this.selectable && (this.treeContentBackground = '#eee')
+        this.showMouseOver && this.selectable && (this.isMouseover = true)
       },
+
       handleMouseout () {
-        this.showMouseOver && this.selectable && (this.treeContentBackground = 'transparent')
+        this.showMouseOver && this.selectable && (this.isMouseover = false)
       },
+
       // 是否对象
       isObject (value) {
-        return this.getDataType(value) === 'object'
-      },
-      // 获取数据类型
-      getDataType (value) {
-        // 若使用 typeof 会影响 webpack 压缩后体积变大
-        return Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
+        return getDataType(value) === 'object'
       },
+
       keyFormatter (key) {
         return this.showDoubleQuotes ? `"${key}"` : key
       }

src/components/brackets-left.vue

@@ -1,15 +1,19 @@
 <template>
   <div>
     <slot></slot>
+
+    <!-- Expand -->
     <span
       v-show="dataVisiable"
-      class="vjs__tree__node"
+      class="vjs-tree__brackets"
       @click.stop="toggleBrackets">
       {{ Array.isArray(data) ? '[' : '{' }}
     </span>
+
+    <!-- Collapse -->
     <span
       v-show="!dataVisiable"
-      class="vjs__tree__node"
+      class="vjs-tree__brackets"
       @click.stop="toggleBrackets">
       {{ doubleBracketsGenerator(data) }}
     </span>
@@ -28,15 +32,16 @@
       // 双括号内容生成器
       doubleBracketsGenerator (data) {
         const isArray = Array.isArray(data)
-        let brackets = isArray ? '[...]' : '{...}'
+        const brackets = isArray ? '[...]' : '{...}'
+        let str = this.bracketsFormatter(brackets)
         if (this.showLength) {
           // 若展示长度, 形如 [...] // 3 items
           const text = isArray
             ? `${data.length} items`
             : `${Object.keys(data).length} keys`
-          brackets += ` // ${text}`
+          str += ` // ${text}`
         }
-        return this.bracketsFormatter(brackets)
+        return str
       }
     }
   }

src/components/brackets-right.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="dataVisiable">
     <span
-      class="vjs__tree__node"
+      class="vjs-tree__brackets"
       @click.stop="toggleBrackets">
       {{ bracketsFormatter(Array.isArray(data) ? ']' : '}') }}
     </span>