feat(dropdown): add type 'contextmenu' trigger for dropdown (#1286)

* feat(dropdown): add type 'contextmenu' trigger for dropdown #961

* docs(dropdown): update dropdown trigger doc

Co-authored-by: wenyu.zhou <wenyu.zhou@huolala.cn>

packages/dropdown/__tests__/dropdown.spec.tsx

@@ -9,6 +9,7 @@ const TIMEOUT = 250
 const MOUSE_ENTER_EVENT = 'mouseenter'
 const MOUSE_LEAVE_EVENT = 'mouseleave'
 const CLICK = 'click'
+const CONTEXTMENU = 'contextmenu'
 
 const _mount = (template: string, data, otherObj?) => mount({
   components: {
@@ -136,6 +137,37 @@ describe('Dropdown', () => {
     expect(content.visible).toBe(true)
   })
 
+  test('trigger contextmenu', async () => {
+    const wrapper = _mount(
+      `
+      <el-dropdown trigger="contextmenu" ref="b" placement="right">
+        <span class="el-dropdown-link" ref="a">
+          dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="a">Apple</el-dropdown-item>
+            <el-dropdown-item command="b">Orange</el-dropdown-item>
+            <el-dropdown-item ref="c" :command="myCommandObject">Cherry</el-dropdown-item>
+            <el-dropdown-item command="d">Peach</el-dropdown-item>
+            <el-dropdown-item command="e">Pear</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      `,
+      () => ({
+        myCommandObject: { name: 'CommandC' },
+        name: '',
+      }),
+    )
+    const content = wrapper.findComponent({ ref: 'b' }).vm as any
+    const triggerElm = wrapper.find('.el-dropdown-link')
+    expect(content.visible).toBe(false)
+    await triggerElm.trigger(CONTEXTMENU)
+    await sleep(TIMEOUT)
+    expect(content.visible).toBe(true)
+  })
+
   test('split button', async () => {
     const wrapper = _mount(
       `

packages/dropdown/src/dropdown-menu.vue

@@ -27,7 +27,7 @@ export default defineComponent({
       elDropdown.show?.()
     }
     function hide() {
-      if (elDropdown.trigger.value === 'click') return
+      if (['click', 'contextmenu'].includes(elDropdown.trigger.value)) return
       _hide()
     }
     function _hide() {

packages/dropdown/src/dropdown.vue

@@ -156,7 +156,7 @@ export default defineComponent({
         () => {
           visible.value = true
         },
-        props.trigger === 'click' ? 0 : props.showTimeout,
+        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.showTimeout,
       )
     }
 
@@ -171,7 +171,7 @@ export default defineComponent({
         () => {
           visible.value = false
         },
-        props.trigger === 'click' ? 0 : props.hideTimeout,
+        ['click', 'contextmenu'].includes(props.trigger) ? 0 : props.hideTimeout,
       )
     }
 
@@ -226,6 +226,11 @@ export default defineComponent({
         on(triggerElm.value, 'mouseleave', hide)
       } else if (props.trigger === 'click') {
         on(triggerElm.value, 'click', handleClick)
+      } else if (props.trigger === 'contextmenu') {
+        on(triggerElm.value, 'contextmenu', e => {
+          e.preventDefault()
+          handleClick()
+        })
       }
 
       Object.assign(_instance, {

website/docs/en-US/dropdown.md

@@ -18,7 +18,7 @@ Hover on the dropdown menu to unfold it for more actions.
       <el-dropdown-item>Action 3</el-dropdown-item>
       <el-dropdown-item disabled>Action 4</el-dropdown-item>
       <el-dropdown-item divided>Action 5</el-dropdown-item>
-    </el-dropdown-menu> 
+    </el-dropdown-menu>
   </template>
 </el-dropdown>
 
@@ -101,7 +101,7 @@ Click the triggering element or hover on it.
 
 ```html
 <el-row class="block-col-2">
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
@@ -118,7 +118,7 @@ Click the triggering element or hover on it.
       </template>
     </el-dropdown>
   </el-col>
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
@@ -135,6 +135,23 @@ Click the triggering element or hover on it.
       </template>
     </el-dropdown>
   </el-col>
+  <el-col :span="8">
+    <span class="demonstration">right click to trigger</span>
+    <el-dropdown trigger="contextmenu">
+      <span class="el-dropdown-link">
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-col>
 </el-row>
 
 <style>
@@ -297,7 +314,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 | size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
 | placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
-| trigger       | how to trigger     | string  |    hover/click  |  hover |
+| trigger       | how to trigger     | string  |    hover/click/contextmenu  |  hover |
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
 | show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
 | hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |

website/docs/es/dropdown.md

@@ -102,7 +102,7 @@ Haga clic en el elemento detonante o sobre él.
 
 ```html
 <el-row class="block-col-2">
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
@@ -119,7 +119,7 @@ Haga clic en el elemento detonante o sobre él.
       </template>
     </el-dropdown>
   </el-col>
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
@@ -136,6 +136,23 @@ Haga clic en el elemento detonante o sobre él.
       </template>
     </el-dropdown>
   </el-col>
+  <el-col :span="8">
+    <span class="demonstration">right click to trigger</span>
+    <el-dropdown trigger="contextmenu">
+      <span class="el-dropdown-link">
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-col>
 </el-row>
 
 <style>
@@ -298,7 +315,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | size          | tamaño del menú, también funciona en `split-button` | string  | medium / small / mini                    | —           |
 | split-button  | si se visualiza un grupo de botones      | boolean | —                                        | false       |
 | placement     | colocación del menú                      | string  | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end  |
-| trigger       | cómo detonar                             | string  | hover/click                              | hover       |
+| trigger       | cómo detonar                             | string  | hover/click/contextmenu                              | hover       |
 | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | —                                        | true        |
 | show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |
 | hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |

website/docs/fr-FR/dropdown.md

@@ -101,7 +101,7 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
 
 ```html
 <el-row class="block-col-2">
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">En passant la souris</span>
     <el-dropdown>
       <span class="el-dropdown-link">
@@ -118,7 +118,7 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
       </template>
     </el-dropdown>
   </el-col>
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">En cliquant</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
@@ -135,6 +135,23 @@ Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la s
       </template>
     </el-dropdown>
   </el-col>
+  <el-col :span="8">
+    <span class="demonstration">Par clic droit</span>
+    <el-dropdown trigger="contextmenu">
+      <span class="el-dropdown-link">
+        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-col>
 </el-row>
 
 <style>
@@ -298,7 +315,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
 | size          | Taille du menu, marche aussi avec `split button`.  | string  | medium / small / mini  |    —     |
 | split-button | Si le bouton est séparé en deux. | boolean         |     —       | false   |
 | placement    | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
-| trigger       | Comment déclencher l'ouverture du menu.     | string  |    hover/click  |  hover |
+| trigger       | Comment déclencher l'ouverture du menu.     | string  |    hover/click/contextmenu  |  hover |
 | hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément.     | boolean          | — | true |
 | show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
 | hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |

website/docs/jp/dropdown.md

@@ -18,7 +18,7 @@ dropdownメニューの上にカーソルを置くと、より多くのアクシ
       <el-dropdown-item>Action 3</el-dropdown-item>
       <el-dropdown-item disabled>Action 4</el-dropdown-item>
       <el-dropdown-item divided>Action 5</el-dropdown-item>
-    </el-dropdown-menu>  
+    </el-dropdown-menu>
   </template>
 </el-dropdown>
 
@@ -53,7 +53,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 3</el-dropdown-item>
       <el-dropdown-item>Action 4</el-dropdown-item>
       <el-dropdown-item>Action 5</el-dropdown-item>
-    </el-dropdown-menu>  
+    </el-dropdown-menu>
   </template>
 </el-dropdown>
 <el-dropdown split-button type="primary" @click="handleClick">
@@ -65,7 +65,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 3</el-dropdown-item>
       <el-dropdown-item>Action 4</el-dropdown-item>
       <el-dropdown-item>Action 5</el-dropdown-item>
-    </el-dropdown-menu>  
+    </el-dropdown-menu>
   </template>
 </el-dropdown>
 
@@ -101,7 +101,7 @@ dropdownリストを起動するには、ボタンを使用します。
 
 ```html
 <el-row class="block-col-2">
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
@@ -113,12 +113,12 @@ dropdownリストを起動するには、ボタンを使用します。
           <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>        
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
         </el-dropdown-menu>
-      </template>  
+      </template>
     </el-dropdown>
   </el-col>
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
@@ -130,9 +130,26 @@ dropdownリストを起動するには、ボタンを使用します。
           <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>        
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
         </el-dropdown-menu>
-      </template>  
+      </template>
+    </el-dropdown>
+  </el-col>
+  <el-col :span="8">
+    <span class="demonstration">right click to trigger</span>
+    <el-dropdown trigger="contextmenu">
+      <span class="el-dropdown-link">
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
     </el-dropdown>
   </el-col>
 </el-row>
@@ -171,7 +188,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 2</el-dropdown-item>
       <el-dropdown-item>Action 3</el-dropdown-item>
       <el-dropdown-item disabled>Action 4</el-dropdown-item>
-      <el-dropdown-item divided>Action 5</el-dropdown-item>                
+      <el-dropdown-item divided>Action 5</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -204,7 +221,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item command="b">Action 2</el-dropdown-item>
       <el-dropdown-item command="c">Action 3</el-dropdown-item>
       <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
-      <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>                
+      <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -245,7 +262,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 1</el-dropdown-item>
       <el-dropdown-item>Action 2</el-dropdown-item>
       <el-dropdown-item>Action 3</el-dropdown-item>
-      <el-dropdown-item>Action 4</el-dropdown-item>               
+      <el-dropdown-item>Action 4</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -257,7 +274,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 1</el-dropdown-item>
       <el-dropdown-item>Action 2</el-dropdown-item>
       <el-dropdown-item>Action 3</el-dropdown-item>
-      <el-dropdown-item>Action 4</el-dropdown-item>               
+      <el-dropdown-item>Action 4</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -269,7 +286,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 1</el-dropdown-item>
       <el-dropdown-item>Action 2</el-dropdown-item>
       <el-dropdown-item>Action 3</el-dropdown-item>
-      <el-dropdown-item>Action 4</el-dropdown-item>               
+      <el-dropdown-item>Action 4</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -281,7 +298,7 @@ dropdownリストを起動するには、ボタンを使用します。
       <el-dropdown-item>Action 1</el-dropdown-item>
       <el-dropdown-item>Action 2</el-dropdown-item>
       <el-dropdown-item>Action 3</el-dropdown-item>
-      <el-dropdown-item>Action 4</el-dropdown-item>               
+      <el-dropdown-item>Action 4</el-dropdown-item>
     </el-dropdown-menu>
   </template>
 </el-dropdown>
@@ -296,7 +313,7 @@ dropdownリストを起動するには、ボタンを使用します。
 | size          | メニューのサイズ(分割ボタンでも動作)  | string  | medium / small / mini  |    —     |
 | split-button | ボタングループの表示の有無 | boolean         |     —       | false   |
 | placement    | ポップメニューの配置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
-| trigger       | トリガーのきっかけ     | string  |    hover/click  |  hover |
+| trigger       | トリガーのきっかけ     | string  |    hover/click/contextmenu  |  hover |
 | hide-on-click | メニューアイテムをクリックした後にメニューを非表示にするかどうか     | boolean          | — | true |
 | show-timeout | dropdownを表示するまでの遅延時間 (トリガーが `hover` の場合のみ動作) | number | — | 250 |
 | hide-timeout | dropdownを非表示にするまでの遅延時間 (トリガーが `hover` の場合のみ動作) | number | — | 150 |

website/docs/zh-CN/dropdown.md

@@ -102,7 +102,7 @@
 :::demo 在`trigger`属性设置为`click`即可。
 ```html
 <el-row class="block-col-2">
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">hover 激活</span>
     <el-dropdown>
       <span class="el-dropdown-link">
@@ -119,7 +119,7 @@
       </template>
     </el-dropdown>
   </el-col>
-  <el-col :span="12">
+  <el-col :span="8">
     <span class="demonstration">click 激活</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
@@ -136,6 +136,23 @@
       </template>
     </el-dropdown>
   </el-col>
+  <el-col :span="8">
+    <span class="demonstration">右键(contextmenu) 激活</span>
+    <el-dropdown trigger="contextmenu">
+      <span class="el-dropdown-link">
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-col>
 </el-row>
 
 <style>
@@ -300,7 +317,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
-| trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+| trigger       | 触发下拉的行为     | string          | hover, click, contextmenu  | hover |
 | hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
 | show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
 | hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |