feat(components): [select] add offset and show-arrow prop (#18837)

feat: add show-arrow prop to control dropdown arrow visibility
This commit is contained in:
DDDDD12138 2024-11-11 17:10:48 +08:00 committed by GitHub
parent ffb30818cf
commit 4f04bcd46f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 36 additions and 0 deletions

View File

@ -254,6 +254,8 @@ select-v2/custom-label
| remote | whether search data from server | ^[boolean] | false |
| remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | ^[Function]`(keyword: string) => void` | — |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| offset ^(2.8.8) | offset of the dropdown | ^[number] | 12 |
| show-arrow ^(2.8.8) | whether the dropdown has an arrow | ^[boolean] | true |
| placement | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start |
| fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] |
| collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | ^[boolean] | false |

View File

@ -223,6 +223,8 @@ select/custom-label
| tag-type | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info |
| tag-effect ^(2.7.7) | tag effect | ^[enum]`'' \| 'light' \| 'dark' \| 'plain'` | light |
| validate-event | whether to trigger form validation | ^[boolean] | true |
| offset ^(2.8.8) | offset of the dropdown | ^[number] | 12 |
| show-arrow ^(2.8.8) | whether the dropdown has an arrow | ^[boolean] | true |
| placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start |
| fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] |
| max-collapse-tags ^(2.3.0) | the max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 |

View File

@ -237,6 +237,20 @@ export const SelectProps = buildProps({
type: Boolean,
default: true,
},
/**
* @description offset of the dropdown
*/
offset: {
type: Number,
default: 12,
},
/**
* @description Determines whether the arrow is displayed
*/
showArrow: {
type: Boolean,
default: true,
},
/**
* @description position of dropdown
*/

View File

@ -22,6 +22,8 @@
trigger="click"
:persistent="persistent"
:append-to="appendTo"
:show-arrow="showArrow"
:offset="offset"
@before-show="handleMenuEnter"
@hide="states.isBeforeHide = false"
>

View File

@ -209,6 +209,20 @@ export const SelectProps = buildProps({
* @description in remote search method show suffix icon
*/
remoteShowSuffix: Boolean,
/**
* @description determines whether the arrow is displayed
*/
showArrow: {
type: Boolean,
default: true,
},
/**
* @description offset of the dropdown
*/
offset: {
type: Number,
default: 12,
},
/**
* @description position of dropdown
*/

View File

@ -22,6 +22,8 @@
:gpu-acceleration="false"
:persistent="persistent"
:append-to="appendTo"
:show-arrow="showArrow"
:offset="offset"
@before-show="handleMenuEnter"
@hide="states.isBeforeHide = false"
>