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

feat(components): [select] & [select-v2] add fallbackPlacements prop (#15765)

Browse Source
This commit is contained in:
赵添 2024-02-05 17:16:18 +08:00 committed by GitHub
parent 3c36473289
commit f33979d228
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en-US/component/select-v2.md
View File

@ -203,7 +203,7 @@ select-v2/custom-loading
| Name | Description | Type | Default |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| model-value / v-model | biding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — |
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — |
| options | data of the options, the key of `value` and `label` can be customize by `props` | ^[array] | — |
| props ^(2.4.2) | configuration options, see the following table | ^[object] | — |
| multiple | is multiple | ^[boolean] | false |
@ -239,6 +239,7 @@ select-v2/custom-loading
| 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 |
| 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) | ^[arrary]`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 |
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 |
| tag-type ^(2.5.0) | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info |

1
docs/en-US/component/select.md
View File

@ -201,6 +201,7 @@ select/custom-loading
| tag-type | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info |
| validate-event | whether to trigger form validation | ^[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) | ^[arrary]`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 |
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object]refer to [popper.js](https://popper.js.org/docs/v2/) doc | {} |
| aria-label ^(a11y) | same as `aria-label` in native input | ^[string] | — |

1
docs/en-US/component/tooltip.md
View File

@ -157,6 +157,7 @@ tooltip/animations
| content | display content, can be overridden by `slot#content` | ^[string] | '' |
| raw-content | whether `content` is treated as HTML string | ^[boolean] | false |
| placement | position of Tooltip | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom |
| fallback-placements | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[arrary]`Placement[]` | — |
| visible / v-model:visible | visibility of Tooltip | ^[boolean] | — |
| disabled | whether Tooltip is disabled | ^[boolean] | — |
| offset | offset of the Tooltip | ^[number] | 12 |

7
packages/components/select-v2/src/defaults.ts
View File

@ -229,6 +229,13 @@ export const SelectProps = buildProps({
values: placements,
default: 'bottom-start',
},
/**
* @description list of possible positions for dropdown
*/
fallbackPlacements: {
type: definePropType<Placement[]>(Array),
default: ['bottom-start', 'top-start', 'right', 'left'],
},
/**
* @description tag type
*/

2
packages/components/select-v2/src/select.vue
View File

@ -15,7 +15,7 @@
:gpu-acceleration="false"
:stop-popper-mouse-event="false"
:popper-options="popperOptions"
:fallback-placements="['bottom-start', 'top-start', 'right', 'left']"
:fallback-placements="fallbackPlacements"
:effect="effect"
:placement="placement"
pure

7
packages/components/select/src/select.ts
View File

@ -212,6 +212,13 @@ export const SelectProps = buildProps({
values: placements,
default: 'bottom-start',
},
/**
* @description list of possible positions for dropdown
*/
fallbackPlacements: {
type: definePropType<Placement[]>(Array),
default: ['bottom-start', 'top-start', 'right', 'left'],
},
/**
* @description native input aria-label
*/

2
packages/components/select/src/select.vue
View File

@ -14,7 +14,7 @@
:teleported="teleported"
:popper-class="[nsSelect.e('popper'), popperClass]"
:popper-options="popperOptions"
:fallback-placements="['bottom-start', 'top-start', 'right', 'left']"
:fallback-placements="fallbackPlacements"
:effect="effect"
pure
trigger="click"