mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
feat(components): [select] add placement (#9621)
This commit is contained in:
Xc
GitHub
parent
dc331de392
commit
2a1cdbd8eb
@ -111,42 +111,43 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
||||
|
||||
## Select Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | — | false |
|
||||
| disabled | whether Select is disabled | boolean | — | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | — | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | — | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | — | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| loading | whether Select is loading data from server | boolean | — | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowUp |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | — | false |
|
||||
| disabled | whether Select is disabled | boolean | — | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | — | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | — | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | — | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| loading | whether Select is loading data from server | boolean | — | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowUp |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
| placement | position of dropdown | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
|
||||
|
||||
## Select Events
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<el-tooltip
|
||||
ref="tooltipRef"
|
||||
:visible="dropMenuVisible"
|
||||
placement="bottom-start"
|
||||
:placement="placement"
|
||||
:teleported="teleported"
|
||||
:popper-class="[nsSelect.e('popper'), popperClass]"
|
||||
:fallback-placements="['bottom-start', 'top-start', 'right', 'left']"
|
||||
@ -272,6 +272,7 @@ import {
|
||||
unref,
|
||||
} from 'vue'
|
||||
import { useResizeObserver } from '@vueuse/core'
|
||||
import { placements } from '@popperjs/core'
|
||||
import { ClickOutside } from '@element-plus/directives'
|
||||
import { useFocus, useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import ElInput from '@element-plus/components/input'
|
||||
@ -387,6 +388,11 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
values: placements,
|
||||
default: 'bottom-start',
|
||||
},
|
||||
},
|
||||
emits: [
|
||||
UPDATE_MODEL_EVENT,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user