feat(dropdown): add contextmenu trigger support (#3861)

* feat(dropdown): add contextmenu trigger support

* docs(dropdown): add version info for new contextmenu trigger

Author: IKEYCY

examples/sites/demos/apis/dropdown.js

@@ -195,16 +195,20 @@ export default {
         },
         {
           name: 'trigger',
-          type: "'hover' | 'click'",
+          type: "'hover' | 'click' | 'contextmenu'",
           defaultValue: "'hover'",
           desc: {
             'zh-CN': '触发下拉的方式',
             'en-US': 'Trigger the dropdown method'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'trigger',
-          mfDemo: ''
+          mfDemo: '',
+          meta: {
+            stable: '3.28.0'
+          }
         },
+
         {
           name: 'type',
           typeAnchorName: 'IButtonType',

examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue

@@ -25,6 +25,19 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+
+    <p>场景 3：设置右键触发下拉</p>
+    <tiny-dropdown trigger="contextmenu">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 

examples/sites/demos/pc/app/dropdown/trigger.spec.ts

@@ -9,6 +9,7 @@ test('触发方式', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const hoverTrigger = dropDown.first()
   const clickTrigger = dropDown.nth(1)
+  const contextTrigger = dropDown.nth(2)
 
   // hover
   await page.waitForTimeout(2000)
@@ -20,4 +21,16 @@ test('触发方式', async ({ page }) => {
   await expect(dropDownMenu.nth(1)).not.toBeVisible()
   await clickTrigger.click()
   await expect(dropDownMenu.nth(1)).toBeVisible()
+
+  // contextmenu
+  await page.waitForTimeout(2000)
+  await contextTrigger.hover()
+  await expect(dropDownMenu.nth(2)).not.toBeVisible()
+
+  // 右键触发
+  await contextTrigger.click({
+    button: 'right'
+  })
+
+  await expect(dropDownMenu.nth(2)).toBeVisible()
 })

examples/sites/demos/pc/app/dropdown/trigger.vue

@@ -25,6 +25,19 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
+
+    <p>场景 3：设置右键触发下拉</p>
+    <tiny-dropdown trigger="contextmenu">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
   </div>
 </template>
 

examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js

@@ -93,9 +93,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为：<code>click</code> / <code>hover</code> 。</p>\n',
+          '<p>通过 <code>trigger</code> 属性设置触发下拉的方式，默认为 <code>hover</code>。可选值为：<code>click</code> / <code>hover</code> / <code>contextmenu</code>（3.28.0 起支持）。</p>\n',
         'en-US':
-          '<p>By setting the <code>trigger</code> attribute to trigger a drop-down, the default is <code>hover</code>. The optional values are: <code>click</code> / <code>hover</code>.</p>\n'
+          '<p>Use the <code>trigger</code> attribute to set how the dropdown is triggered. Default is <code>hover</code>. Optional values: <code>click</code> / <code>hover</code> / <code>contextmenu</code> (supported since 3.28.0).</p>\n'
       },
       codeFiles: ['trigger.vue']
     },
@@ -108,7 +108,7 @@ export default {
       desc: {
         'zh-CN': '<p>通过 <code>visible</code> 属性手动控制下拉菜单显隐，优先级高于trigger。</p>\n',
         'en-US':
-          '<p>Manually control the visibility of the dropdown menu through the<code>visible</code>attribute, with priority over trigger.</p>\n'
+          '<p>Manually control the visibility of the dropdown menu through the <code>visible</code>attribute, with priority over trigger.</p>\n'
       },
       codeFiles: ['visible.vue']
     },
@@ -307,7 +307,7 @@ export default {
       support: {
         value: true
       },
-      description: '支持点击和悬停两种触发方式。',
+      description: '支持点击、悬停以及右键（contextmenu，3.28.0 起支持）触发方式。',
       cloud: {
         value: true
       },

packages/renderless/src/dropdown/index.ts

@@ -55,7 +55,7 @@ export const show =
         () => {
           state.visible = true
         },
-        state.trigger === 'click' ? 0 : props.showTimeout
+        state.trigger === 'click' || state.trigger === 'contextmenu' ? 0 : props.showTimeout
       )
     }
   }
@@ -82,7 +82,7 @@ export const hide =
         () => {
           state.visible = false
         },
-        state.trigger === 'click' ? 0 : props.hideTimeout
+        state.trigger === 'click' || state.trigger === 'contextmenu' ? 0 : props.hideTimeout
       )
     }
   }
@@ -127,7 +127,7 @@ export const handleItemKeyDown =
   ({ api, props, state, emit }: Pick<IDropdownRenderlessParams, 'api' | 'props' | 'state' | 'emit'>) =>
   (event: KeyboardEvent) => {
     const keyCode = event.keyCode
-    const target = event.target
+    const target = event.target as HTMLElement
     const currentIndex = state.menuItemsArray.indexOf(target)
     const max = state.menuItemsArray.length - 1
 
@@ -215,7 +215,15 @@ export const initEvent =
       return
     }
 
-    if (state.trigger === 'hover') {
+    /** ---------------------------
+     *  新增：右键触发 contextmenu
+     * --------------------------- */
+    if (state.trigger === 'contextmenu') {
+      on(state.triggerElm, 'contextmenu', (e: MouseEvent) => {
+        e.preventDefault()
+        api.handleClick()
+      })
+    } else if (state.trigger === 'hover') {
       on(state.triggerElm, 'mouseenter', api.show)
       on(state.triggerElm, 'mouseleave', api.hide)
       on(state.dropdownElm, 'mouseenter', api.show)
@@ -302,6 +310,7 @@ export const beforeDistory =
       off(state.triggerElm, 'mouseenter', api.show)
       off(state.triggerElm, 'mouseleave', api.hide)
       off(state.triggerElm, 'click', api.handleClick)
+      off(state.triggerElm, 'contextmenu', api.handleClick) /** 右键清理 */
       state.triggerElm = null
     }