Tree support contextmenu

examples/routers/tree.vue

@@ -1,5 +1,10 @@
 <template>
-    <Tree :data="data4" show-checkbox multiple></Tree>
+    <Tree :data="data4" show-checkbox multiple @on-contextmenu="handleContextMenu">
+        <template slot="contextMenu">
+            <DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
+            <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
+        </template>
+    </Tree>
 </template>
 <script>
     export default {
@@ -10,11 +15,13 @@
                         title: 'parent 1',
                         expand: true,
                         selected: true,
+                        contextmenu: true,
                         children: [
                             {
                                 title: 'parent 1-1',
                                 expand: true,
                                 disabled: true,
+                                contextmenu: true,
                                 children: [
                                     {
                                         title: 'leaf 1-1-1',
@@ -28,19 +35,33 @@
                             {
                                 title: 'parent 1-2',
                                 expand: true,
+                                contextmenu: true,
                                 children: [
                                     {
                                         title: 'leaf 1-2-1',
                                         checked: true
                                     },
                                     {
-                                        title: 'leaf 1-2-1'
+                                        title: 'leaf 1-2-1',
+                                        contextmenu: true,
                                     }
                                 ]
                             }
                         ]
                     }
-                ]
+                ],
+                contextTitle: 0
+            }
+        },
+        methods: {
+            handleContextMenu (data) {
+                this.contextTitle = data.title;
+            },
+            handleContextMenuEdit () {
+                this.$Message.info('Click edit of line' + this.contextTitle);
+            },
+            handleContextMenuDelete () {
+                this.$Message.info('Click delete of line' + this.contextTitle);
             }
         }
     }

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>

src/styles/components/tree.less

@@ -1,6 +1,7 @@
 @tree-prefix-cls: ~"@{css-prefix}tree";
 
 .@{tree-prefix-cls} {
+    position: relative;
     ul{
         list-style: none;
         margin: 0;
@@ -75,4 +76,8 @@
         margin-right: 4px;
         margin-left: 4px;
     }
+
+    &-context-menu{
+        position: absolute;
+    }
 }