[dev] 为expand增加事件#140

Author: odanzhou

README.md

@@ -101,6 +101,8 @@ Vue.use (VSelectTree)
 | async-load-nodes | event used to implement asynchronous loading | node: Object |
 | drag-node-end | drag node end trigger the event | {dragNode: Object, targetNode: Object} |
 | del-node | after delete a node | { parentNode: Object || null, delNode: Object } |
+| node-expand  | click the expand to trigger the event | node: Object, expand: boolean, position: {level, index}|
+
 ### How to use
 
 Step1: install plugins

README_CN.md

@@ -95,11 +95,12 @@ Vue.use (VSelectTree)
 |---------- |-------- |---------- |
 | node-click  | 单击节点触发的事件 | node: Object |
 | node-select  | 选择节点后触发的事件(和node-click是一样的)；position: 位置信息level：层级 | node: Object, selected: boolean, position: {level, index}|
-| node-check | click the checkbox to trigger the event | node: Object, checked: boolean, position: {level, index} |
+| node-check | 点击checkbox触发事件 | node: Object, checked: boolean, position: {level, index} |
 | node-mouse-over | 鼠标滑过节点触发事件 | node: Object, index: Number, parentNode: node, position: {level, index} |
 | async-load-nodes | 用于实现异步加载 | node: Object |
 | drag-node-end | 节点拖拽结束后触发事件 | {dragNode: Object, targetNode: Object} |
 | del-node | 删除节点后触发事件 | { parentNode: Object || null, delNode: Object } |
+| node-expand | expand触发事件 | node: Object, expand: boolean, position: {level, index} |
 
 ### 如何使用
 

src/components/tree.vue

@@ -123,7 +123,6 @@ export default {
       if (!eventName) return
       // 为了让接口更清晰
       if('node-mouse-over' != eventName)
-      console.log('args', args)
       switch (eventName) {
         case 'node-mouse-over':
         case 'node-check':
@@ -132,6 +131,7 @@ export default {
         case 'node-click':
         case 'node-select': // 和 'node-click'一样,为了更好的语义化
         case 'async-load-nodes':
+        case 'node-expand':
           this.$emit(eventName, ...args)
           break
         default:

src/components/treeLi.vue

@@ -99,8 +99,7 @@ export default {
   inject:['isLeaf', 'childChecked', 'parentChecked', 'nodeSelected', 'emitEventToTree', 'setAttr'],
   computed: {
     itemVisible() {
-      let {visible = true} = this.item
-      // visible = visible === false ? false : true
+      const {visible = true} = this.item
       return visible
     },
     hasExpended() { // 已经展开过
@@ -134,6 +133,9 @@ export default {
     },
     showNextUl () {
       return !this.isLeaf(this.item) && this.maxLevel > this.level && this.hasExpended
+    },
+    position () {
+      return {level: this.level, index: this.index}
     }
   },
   watch: {
@@ -167,11 +169,10 @@ export default {
       const expended = !node.expanded
       this.setAttr(node, 'expanded', expended)
       this.setAttr(node, 'hasExpended', true)
-      if(node.children || node.async) {
-        if (node.async && !node.children) {
-          this.emitEventToTree('async-load-nodes', node)
-        }
+      if (node.async && !node.children) {
+        this.emitEventToTree('async-load-nodes', node)
       }
+      this.emitEventToTree('node-expand', node, expended, this.position)
     },
     /* @event passing the node-check event to the parent component
      * @param node clicked node
@@ -202,7 +203,7 @@ export default {
     changeNodeCheckStatus (node, $event) {
       const checked = $event.target.checked
       this.nodeCheck(node, checked)
-      this.emitEventToTree('node-check', node, checked, {level: this.level, index: this.index})
+      this.emitEventToTree('node-check', node, checked, this.position)
     },
     theParentChecked(checked, halfcheck){
       const parentNode = this.parent