diff --git a/examples/sites/demos/apis/dropdown.js b/examples/sites/demos/apis/dropdown.js
index c7dee248b3..47d7ab9a11 100644
--- a/examples/sites/demos/apis/dropdown.js
+++ b/examples/sites/demos/apis/dropdown.js
@@ -195,7 +195,7 @@ export default {
},
{
name: 'trigger',
- type: "'hover' | 'click'",
+ type: "'hover' | 'click' | 'contextmenu'",
defaultValue: "'hover'",
desc: {
'zh-CN': '触发下拉的方式',
@@ -203,8 +203,12 @@ export default {
},
mode: ['pc', 'mobile-first'],
pcDemo: 'trigger',
- mfDemo: ''
+ mfDemo: '',
+ meta: {
+ stable: '3.28.0'
+ }
},
+
{
name: 'type',
typeAnchorName: 'IButtonType',
diff --git a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
index 6fcc954d6f..b0d15b3752 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger-composition-api.vue
@@ -25,6 +25,19 @@
+
+
场景 3:设置右键触发下拉
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
diff --git a/examples/sites/demos/pc/app/dropdown/trigger.spec.ts b/examples/sites/demos/pc/app/dropdown/trigger.spec.ts
index 93233f73a2..2911ecb092 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger.spec.ts
+++ b/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()
})
diff --git a/examples/sites/demos/pc/app/dropdown/trigger.vue b/examples/sites/demos/pc/app/dropdown/trigger.vue
index af3ed368be..b7c354616d 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger.vue
+++ b/examples/sites/demos/pc/app/dropdown/trigger.vue
@@ -25,6 +25,19 @@
+
+ 场景 3:设置右键触发下拉
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index 71b8ea96de..8f7e649b17 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -93,9 +93,9 @@ export default {
},
desc: {
'zh-CN':
- '通过 trigger 属性设置触发下拉的方式,默认为 hover。可选值为:click / hover 。
\n',
+ '通过 trigger 属性设置触发下拉的方式,默认为 hover。可选值为:click / hover / contextmenu(3.28.0 起支持)。
\n',
'en-US':
- 'By setting the trigger attribute to trigger a drop-down, the default is hover. The optional values are: click / hover.
\n'
+ 'Use the trigger attribute to set how the dropdown is triggered. Default is hover. Optional values: click / hover / contextmenu (supported since 3.28.0).
\n'
},
codeFiles: ['trigger.vue']
},
@@ -108,7 +108,7 @@ export default {
desc: {
'zh-CN': '通过 visible 属性手动控制下拉菜单显隐,优先级高于trigger。
\n',
'en-US':
- 'Manually control the visibility of the dropdown menu through thevisibleattribute, with priority over trigger.
\n'
+ 'Manually control the visibility of the dropdown menu through the visibleattribute, with priority over trigger.
\n'
},
codeFiles: ['visible.vue']
},
@@ -307,7 +307,7 @@ export default {
support: {
value: true
},
- description: '支持点击和悬停两种触发方式。',
+ description: '支持点击、悬停以及右键(contextmenu,3.28.0 起支持)触发方式。',
cloud: {
value: true
},
diff --git a/packages/renderless/src/dropdown/index.ts b/packages/renderless/src/dropdown/index.ts
index 806d456863..02d8a98429 100644
--- a/packages/renderless/src/dropdown/index.ts
+++ b/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) =>
(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
}