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 }