From eccaa940bd2f68269c8fb18238c661bb598b1157 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 27 Jun 2018 10:45:15 +0800
Subject: [PATCH] Dropdown add new trigger contextMenu

---
 examples/routers/dropdown.vue        | 386 +++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/dropdown/dropdown.vue |  27 +++++++++++++++++++++++++--
 src/styles/components/dropdown.less  |   5 +++++
 3 files changed, 69 insertions(+), 349 deletions(-)

diff --git a/examples/routers/dropdown.vue b/examples/routers/dropdown.vue
index f9557b4..977051a 100644
--- a/examples/routers/dropdown.vue
+++ b/examples/routers/dropdown.vue
@@ -1,352 +1,44 @@
 <template>
     <div>
-        <div>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
-                <a href="javascript:void(0)">
-                    right-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
-                <a href="javascript:void(0)">
-                    right-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
-                <a href="javascript:void(0)">
-                    bottom-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
-                <a href="javascript:void(0)">
-                    bottom-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
-                <a href="javascript:void(0)">
-                    top-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
-                <a href="javascript:void(0)">
-                    top-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
-                <a href="javascript:void(0)">
-                    left-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
-                <a href="javascript:void(0)">
-                    left-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
-                <a href="javascript:void(0)">
-                    top
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
-                <a href="javascript:void(0)">
-                    bottom
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
-                <a href="javascript:void(0)">
-                    left
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
-                <a href="javascript:void(0)">
-                    right
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-        </div>
-        <br><br><br><br>
-        <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
-                <a href="javascript:void(0)">
-                    right-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
-                <a href="javascript:void(0)">
-                    right-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
-                <a href="javascript:void(0)">
-                    bottom-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
-                <a href="javascript:void(0)">
-                    bottom-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
-                <a href="javascript:void(0)">
-                    top-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
-                <a href="javascript:void(0)">
-                    top-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
-                <a href="javascript:void(0)">
-                    left-start
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
-                <a href="javascript:void(0)">
-                    left-end
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            
-            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
-                <a href="javascript:void(0)">
-                    top
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
-                <a href="javascript:void(0)">
-                    bottom
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
-                <a href="javascript:void(0)">
-                    left
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
-                <a href="javascript:void(0)">
-                    right
-                    <Icon type="arrow-down-b"></Icon>
-                </a>
-                <DropdownMenu slot="list">
-                    <DropdownItem>驴打滚</DropdownItem>
-                    <DropdownItem>炸酱面</DropdownItem>
-                    <DropdownItem>豆汁儿</DropdownItem>
-                    <DropdownItem>冰糖葫芦</DropdownItem>
-                    <DropdownItem>北京烤鸭</DropdownItem>
-                </DropdownMenu>
-            </Dropdown>
-        </div>
+        <Dropdown trigger="hover">
+            <a href="javascript:void(0)">
+                下拉菜单
+                <Icon type="ios-arrow-down"></Icon>
+            </a>
+            <DropdownMenu slot="list">
+                <DropdownItem>驴打滚</DropdownItem>
+                <DropdownItem>炸酱面</DropdownItem>
+                <DropdownItem disabled>豆汁儿</DropdownItem>
+                <DropdownItem>冰糖葫芦</DropdownItem>
+                <DropdownItem divided>北京烤鸭</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+        <Dropdown trigger="click">
+            <a href="javascript:void(0)">
+                下拉菜单
+                <Icon type="ios-arrow-down"></Icon>
+            </a>
+            <DropdownMenu slot="list">
+                <DropdownItem>驴打滚</DropdownItem>
+                <DropdownItem>炸酱面</DropdownItem>
+                <DropdownItem disabled>豆汁儿</DropdownItem>
+                <DropdownItem>冰糖葫芦</DropdownItem>
+                <DropdownItem divided>北京烤鸭</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
+        <Dropdown trigger="contextMenu">
+            <a href="javascript:void(0)">
+                下拉菜单
+                <Icon type="ios-arrow-down"></Icon>
+            </a>
+            <DropdownMenu slot="list">
+                <DropdownItem>驴打滚</DropdownItem>
+                <DropdownItem>炸酱面</DropdownItem>
+                <DropdownItem disabled>豆汁儿</DropdownItem>
+                <DropdownItem>冰糖葫芦</DropdownItem>
+                <DropdownItem divided>北京烤鸭</DropdownItem>
+            </DropdownMenu>
+        </Dropdown>
     </div>
 </template>
 <script>
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 6d1233a..842a791 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -4,7 +4,7 @@
         v-click-outside="onClickoutside"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
-        <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
+        <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
         <transition name="transition-drop">
             <Drop
                 :class="dropdownCls"
@@ -33,7 +33,7 @@
         props: {
             trigger: {
                 validator (value) {
-                    return oneOf(value, ['click', 'hover', 'custom']);
+                    return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
                 },
                 default: 'hover'
             },
@@ -60,6 +60,14 @@
                 return {
                     [prefixCls + '-transfer']: this.transfer
                 };
+            },
+            relClasses () {
+                return [
+                    `${prefixCls}-rel`,
+                    {
+                        [`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
+                    }
+                ];
             }
         },
         data () {
@@ -89,6 +97,13 @@
                 }
                 this.currentVisible = !this.currentVisible;
             },
+            handleRightClick () {
+                if (this.trigger === 'custom') return false;
+                if (this.trigger !== 'contextMenu') {
+                    return false;
+                }
+                this.currentVisible = !this.currentVisible;
+            },
             handleMouseenter () {
                 if (this.trigger === 'custom') return false;
                 if (this.trigger !== 'hover') {
@@ -113,6 +128,7 @@
             },
             onClickoutside (e) {
                 this.handleClose();
+                this.handleRightClose();
                 if (this.currentVisible) this.$emit('on-clickoutside', e);
             },
             handleClose () {
@@ -122,6 +138,13 @@
                 }
                 this.currentVisible = false;
             },
+            handleRightClose () {
+                if (this.trigger === 'custom') return false;
+                if (this.trigger !== 'contextMenu') {
+                    return false;
+                }
+                this.currentVisible = false;
+            },
             hasParent () {
 //                const $parent = this.$parent.$parent.$parent;
                 const $parent = findComponentUpward(this, 'Dropdown');
diff --git a/src/styles/components/dropdown.less b/src/styles/components/dropdown.less
index 56c2ab8..a610d5d 100644
--- a/src/styles/components/dropdown.less
+++ b/src/styles/components/dropdown.less
@@ -16,6 +16,11 @@
     &-rel{
         //display: inline-block;
         position: relative;
+        &-user-select-none{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
     }
 
     &-menu{
--
libgit2 0.21.4