Tree support contextmenu

src/components/tree/node.vue

@@ -1,7 +1,7 @@
 <template>
     <collapse-transition :appear="appear">
         <ul :class="classes">
-            <li>
+            <li @contextmenu.stop="handleContextmenu(data, $event)">
                 <span :class="arrowClasses" @click="handleExpand">
                     <Icon v-if="showArrow" :type="arrowType" :custom="customArrowType" :size="arrowSize" />
                     <Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop" />
@@ -216,6 +216,12 @@
                     nodeKey: this.data.nodeKey
                 };
                 this.dispatch('Tree', 'on-check', changes);
+            },
+            handleContextmenu (data, event) {
+                if (data.contextmenu) {
+                    event.preventDefault();
+                    this.dispatch('Tree', 'contextmenu', { data, event });
+                }
             }
         }
     };

src/components/tree/tree.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="prefixCls">
+    <div :class="prefixCls" ref="treeWrap">
         <Tree-node
             v-for="(item, i) in stateTree"
             :key="i"
@@ -10,6 +10,13 @@
             :children-key="childrenKey">
         </Tree-node>
         <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
+        <div class="ivu-tree-context-menu" :style="contextMenuStyles">
+            <Dropdown trigger="custom" :visible="contextMenuVisible" transfer @on-clickoutside="handleClickContextMenuOutside">
+                <DropdownMenu slot="list">
+                    <slot name="contextMenu"></slot>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
     </div>
 </template>
 <script>
@@ -70,6 +77,11 @@
                 prefixCls: prefixCls,
                 stateTree: this.data,
                 flatState: [],
+                contextMenuVisible: false,
+                contextMenuStyles: {
+                    top: 0,
+                    left: 0
+                }
             };
         },
         watch: {
@@ -191,6 +203,20 @@
                 this.updateTreeDown(node, {checked, indeterminate: false}); // reset `indeterminate` when going down
 
                 this.$emit('on-check-change', this.getCheckedNodes(), node);
+            },
+            handleContextmenu ({ data, event }) {
+                const $TreeWrap = this.$refs.treeWrap;
+                const TreeBounding = $TreeWrap.getBoundingClientRect();
+                const position = {
+                    left: `${event.clientX - TreeBounding.left}px`,
+                    top: `${event.clientY - TreeBounding.top}px`
+                };
+                this.contextMenuStyles = position;
+                this.contextMenuVisible = true;
+                this.$emit('on-contextmenu', data, event, position);
+            },
+            handleClickContextMenuOutside () {
+                this.contextMenuVisible = false;
             }
         },
         created(){
@@ -201,6 +227,7 @@
             this.$on('on-check', this.handleCheck);
             this.$on('on-selected', this.handleSelect);
             this.$on('toggle-expand', node => this.$emit('on-toggle-expand', node));
+            this.$on('contextmenu', this.handleContextmenu);
         }
     };
 </script>