增加属性: 配置主题色, 相关私有辅助函数优化

Author: buuing

README.md

@@ -31,6 +31,7 @@ Vue.use(SearchTree)
 |  :-:                  | :-: | :-: | :-:
 | data                  | 源数据 | Array | 必填项
 | node-key              | 节点的唯一标识 | String | 'id'
+| theme-color           | 主题色 | String | '#409eff'
 | search                | 模糊搜索的关键词 | String | ''
 | hide-misses           | 是否隐藏模糊搜索不匹配的节点 | Boolean | true
 | expand-misses         | 是否展开模糊搜索不匹配的节点 | Boolean | false
@@ -83,4 +84,5 @@ Vue.use(SearchTree)
 | getTotalOfNodes | 获取所有满足条件的节点数量 | - | Function | 所有满足条件的节点数量
 
 - **`getTotalOfNodes` 使用示例:**
+
   - 获取所有名称包含'北京'的节点: `getTotalOfNodes(node => node.name.indexOf('北京') > -1)`

dist/index.common.js

@@ -35,6 +35,7 @@ export default {
         </svg>
         {
           root.showCheckbox && <zCheckbox
+            theme-color={root.themeColor}
             value={data.checked}
             disabled={data[disabled]}
             indeterminate={data.indeterminate}
@@ -74,33 +75,36 @@ export default {
     _upwardUpdateChecked (checked) {
       const { data, root } = this
       const { children } = root.defaultProps
+      let oneNodeIsIndeterminate = false, len = data[children].length
       // 获取所有选中节点的数量
-      const checkedNum = data[children].reduce((num, item) => num += +item.checked, 0)
+      const checkedNum = data[children].reduce((num, item) => {
+        if (item.indeterminate) oneNodeIsIndeterminate = true
+        return num += +item.checked
+      }, 0)
       // 所有节点都被选中时checked=true, 反之false
-      data.checked = checkedNum === data[children].length
-      // 
-      if (checkedNum === data[children].length) {
-        data.indeterminate = false
-      } else {
-        data.indeterminate = !!checkedNum || !!root._preorder(data[children], item => item.checked)
-      }
+      data.checked = checkedNum === len
+      // 如果全部节点都选中了, 那么indeterminate必然等于false, 否则就看子节点是否有半选节点, 再看子节点是否有0个未选中
+      data.indeterminate = checkedNum === len ? false : (oneNodeIsIndeterminate || !!checkedNum)
       this.$emit('check-change', data.checked)
     },
     handlerChecked (e) {
       const { data, root } = this
       const { children, disabled } = root.defaultProps
-      let checked = !data.checked
       if (data[disabled]) return false
+      let checked = !data.checked
       // 过滤所有disabled=false的叶子节点, 如果有没选中的就重写checked
       data[children].length && checked && (
         checked = !!root._levelOrder(data[children], item => !item[disabled] && !item.checked)
       )
+      // 必须先向下改变状态
       root._downwardUpdateChecked(data, checked)
+      // 再向上逐级传递状态
       this.$emit('check-change', checked)
       root.$emit('node-checked', e, deepCopy(data))
     },
     handlerExpand (e) {
       const { data, root } = this
+      if (!data.children.length) return false
       data.expand = !data.expand
       root.$emit('node-expand', e, deepCopy(data))
     }

dist/index.css

@@ -13,6 +13,10 @@ export default {
       type: String,
       default: 'id'
     },
+    themeColor: {          // 主题色
+      type: String,
+      default: '#409eff'
+    },
     search: {              // 模糊搜索关键词
       type: String,
       default: ''

dist/index.umd.js

@@ -4,26 +4,29 @@ export default {
   functional: true,
   render (h, ctx) {
     const { props } = ctx
-    const renderIcon = function (props) {
-      if (props.indeterminate) return <svg t="1593660826979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19241" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m42.666666 85.333333v597.333334h597.333334V213.333333H213.333333z m85.333334 256h426.666666v85.333334H298.666667v-85.333334z" p-id="19242" fill="#2080F0"></path></svg>
-      if (props.value) return <svg t="1593660847492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19489" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m298.794666 554.666667l301.653334-301.696-60.330667-60.330667-241.322667 241.365333-120.704-120.704-60.330666 60.330667L469.461333 682.666667z" p-id="19490" fill="#2080F0"></path></svg>
-      return <svg t="1593660598710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18740" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m42.666666 85.333333v597.333334h597.333334V213.333333H213.333333z" p-id="18741" fill="#2080f0"></path></svg>
+    const renderIcon = function (props, color) {
+      if (props.indeterminate) return <svg t="1593660826979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19241" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m42.666666 85.333333v597.333334h597.333334V213.333333H213.333333z m85.333334 256h426.666666v85.333334H298.666667v-85.333334z" p-id="19242" fill={color}></path></svg>
+      if (props.value) return <svg t="1593660847492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19489" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m298.794666 554.666667l301.653334-301.696-60.330667-60.330667-241.322667 241.365333-120.704-120.704-60.330666 60.330667L469.461333 682.666667z" p-id="19490" fill={color}></path></svg>
+      return <svg t="1593660598710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18740" width="18" height="18"><path d="M170.666667 128h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m42.666666 85.333333v597.333334h597.333334V213.333333H213.333333z" p-id="18741" fill={color}></path></svg>
     }
-    return <div class="tree-checkbox" style={{
+    return <div class={['tree-checkbox', {disabled: props.disabled}]} style={{
       filter: `grayscale(${props.disabled ? 100 : 0}%)`,
       opacity: props.disabled ? 0.7 : 1
-    }} onClick={e => ctx.listeners.click(e)}>{renderIcon(props)}</div>
+    }} onClick={e => ctx.listeners.click(e)}>{renderIcon(props, props.themeColor)}</div>
   }
 }
 </script>
 
 <style scoped>
-div {
-  display: block;
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  margin: 0 0 0 3px;
-  cursor: pointer;
-}
+  div {
+    display: block;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin: 0 0 0 3px;
+    cursor: pointer;
+  }
+  .disabled {
+    cursor: not-allowed;
+  }
 </style>