mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [dropdown] add triggerKeys attribute (#19124)

Browse Source 
* feat(components): [dropdown] add triggerKeys attribute

Add a triggerKeys property to the dropdown to allow users to customize the triggerKeys, thereby
addressing interaction issues when el-input is used as the trigger element.

closed #19102

* Update docs/en-US/component/dropdown.md

Co-authored-by: btea <2356281422@qq.com>

* fix: rename triggerKeys to dropdownTriggerKeys

* Update docs/en-US/component/dropdown.md

Co-authored-by: qiang <qw13131wang@gmail.com>

* Update packages/components/dropdown/src/dropdown.ts

Co-authored-by: qiang <qw13131wang@gmail.com>

* fix: remove redundant logic

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
hanchao-c0ldwave 2024-12-08 17:03:41 +08:00 committed by GitHub
parent ea3cfc97c7
commit bd4800bf38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en-US/component/dropdown.md
View File

@ -92,7 +92,7 @@ dropdown/sizes
### Dropdown Attributes
| Name | Description | Type | Default |
| -------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| -------------------- |-----------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | ^[enum]`'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text' (deprecated)` | '' |
| size | menu size, also works on the split button | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | '' |
| max-height | the max height of menu | ^[string] / ^[number] | '' |
@ -100,6 +100,7 @@ dropdown/sizes
| disabled | whether to disable | ^[boolean] | false |
| placement | placement of pop menu | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom |
| trigger | how to trigger | ^[enum]`'hover' \| 'click' \| 'contextmenu'` | hover |
| triggerKeys ^(2.9.1) | specify whick keys on the keyboard can trigger when pressed | ^[array]`string[]` | `['Enter', 'Space', 'ArrowDown', 'NumpadEnter']`
| 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] | 150 |
| hide-timeout | delay time before hide a dropdown (only works when trigger is `hover`) | ^[number] | 150 |

9
packages/components/dropdown/src/dropdown.ts
View File

@ -30,6 +30,15 @@ export const dropdownProps = buildProps({
* @description how to trigger
*/
trigger: useTooltipTriggerProps.trigger,
triggerKeys: {
type: definePropType<string[]>(Array),
default: () => [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space,
EVENT_CODE.down,
],
},
effect: {
...useTooltipContentProps.effect,
default: 'light',

8
packages/components/dropdown/src/dropdown.vue
View File

@ -112,7 +112,6 @@ import { ElOnlyChild } from '@element-plus/components/slot'
import { useFormSize } from '@element-plus/components/form'
import { addUnit, ensureArray } from '@element-plus/utils'
import { ArrowDown } from '@element-plus/icons-vue'
import { EVENT_CODE } from '@element-plus/constants'
import { useId, useLocale, useNamespace } from '@element-plus/hooks'
import { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'
import { DROPDOWN_INJECTION_KEY } from './tokens'
@ -148,12 +147,6 @@ export default defineComponent({
const scrollbar = ref(null)
const currentTabId = ref<string | null>(null)
const isUsingKeyboard = ref(false)
const triggerKeys = [
EVENT_CODE.enter,
EVENT_CODE.numpadEnter,
EVENT_CODE.space,
EVENT_CODE.down,
]
const wrapStyle = computed<CSSProperties>(() => ({
maxHeight: addUnit(props.maxHeight),
@ -300,7 +293,6 @@ export default defineComponent({
dropdownTriggerKls,
dropdownSize,
triggerId,
triggerKeys,
currentTabId,
handleCurrentTabIdChange,
handlerMainButtonClick,