mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 19:28:14 +08:00
feat(components): [select] enhanced suffix (#9619)
* feat(components): [select] enhanced suffix * docs: remove useless characters * docs(components): [select] add remote suffix demo
This commit is contained in:
Xc
GitHub
parent
678fc5cdf2
commit
e8817aae06
@ -114,39 +114,41 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
||||
| 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 |
|
||||
| multiple | whether multiple-select is activated | boolean | true / false | false |
|
||||
| disabled | whether Select is disabled | boolean | true / false | 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 |
|
||||
| clearable | whether select can be cleared | boolean | true / false | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | true / false | 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 |
|
||||
| filterable | whether Select is filterable | boolean | true / false | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | true / false | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | — | false |
|
||||
| remote | whether options are loaded from server | boolean | true / false | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| loading | whether Select is loading data from server | boolean | — | false |
|
||||
| remote-show-suffix | in remote search method show suffix icon | boolean | true / false | false |
|
||||
| loading | whether Select is loading data from server | boolean | true / false | 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 |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | true / false | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | true / false | 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 / false | 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 |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | true / false | 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 |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | true / false | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowDown |
|
||||
| suffix-transition | animation when dropdown appears/disappears icon | boolean | true / false | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | - | true |
|
||||
| validate-event | whether to trigger form validation | boolean | true / false | 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
|
||||
|
||||
@ -1,21 +1,67 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div style="display: inline-block; margin-left: 20px">
|
||||
<p style="margin-left: 10px">default</p>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: inline-block; margin-left: 20px">
|
||||
<p style="margin-left: 10px">use remote-show-suffix</p>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
remote-show-suffix
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: inline-block; margin-left: 20px">
|
||||
<p style="margin-left: 10px">disabled suffix-transition</p>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="Please enter a keyword"
|
||||
remote-show-suffix
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
:suffix-transition="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -3,7 +3,7 @@ import { markRaw, nextTick } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, test, vi } from 'vitest'
|
||||
import { EVENT_CODE } from '@element-plus/constants'
|
||||
import { ArrowUp, CaretTop, CircleClose } from '@element-plus/icons-vue'
|
||||
import { ArrowDown, CaretTop, CircleClose } from '@element-plus/icons-vue'
|
||||
import { POPPER_CONTAINER_SELECTOR } from '@element-plus/hooks'
|
||||
import { hasClass } from '@element-plus/utils'
|
||||
import { ElFormItem } from '@element-plus/components/form'
|
||||
@ -740,13 +740,44 @@ describe('Select', () => {
|
||||
|
||||
test('suffix icon', async () => {
|
||||
wrapper = _mount(`<el-select></el-select>`)
|
||||
let suffixIcon = wrapper.findComponent(ArrowUp)
|
||||
let suffixIcon = wrapper.findComponent(ArrowDown)
|
||||
expect(suffixIcon.exists()).toBe(true)
|
||||
await wrapper.setProps({ suffixIcon: markRaw(CaretTop) })
|
||||
suffixIcon = wrapper.findComponent(CaretTop)
|
||||
expect(suffixIcon.exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('test suffix transition', async () => {
|
||||
wrapper = _mount(`<el-select></el-select>`)
|
||||
expect(wrapper.find('.el-select__caret').classes()).not.toContain(
|
||||
'is-reverse'
|
||||
)
|
||||
// open dropdown
|
||||
wrapper.trigger('click')
|
||||
await nextTick()
|
||||
expect(wrapper.find('.el-select__caret').classes()).toContain('is-reverse')
|
||||
|
||||
await wrapper.setProps({ suffixTransition: false })
|
||||
|
||||
wrapper.trigger('click')
|
||||
await nextTick()
|
||||
expect(wrapper.find('.el-select__caret').classes()).not.toContain(
|
||||
'is-reverse'
|
||||
)
|
||||
})
|
||||
|
||||
test('test remote show suffix', async () => {
|
||||
wrapper = _mount(`<el-select></el-select>`)
|
||||
await wrapper.setProps({
|
||||
remote: true,
|
||||
filters: true,
|
||||
remoteShowSuffix: true,
|
||||
})
|
||||
|
||||
const suffixIcon = wrapper.findComponent(ArrowDown)
|
||||
expect(suffixIcon.exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('fitInputWidth', async () => {
|
||||
wrapper = getSelectVm({ fitInputWidth: true })
|
||||
const selectWrapper = wrapper.findComponent({ name: 'ElSelect' })
|
||||
|
||||
@ -281,14 +281,14 @@ import ElScrollbar from '@element-plus/components/scrollbar'
|
||||
import ElTag, { tagProps } from '@element-plus/components/tag'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
|
||||
import { isValidComponentSize } from '@element-plus/utils'
|
||||
import { ArrowUp, CircleClose } from '@element-plus/icons-vue'
|
||||
import { iconPropType, isValidComponentSize } from '@element-plus/utils'
|
||||
import { ArrowDown, CircleClose } from '@element-plus/icons-vue'
|
||||
import ElOption from './option.vue'
|
||||
import ElSelectMenu from './select-dropdown.vue'
|
||||
import { useSelect, useSelectStates } from './useSelect'
|
||||
import { selectKey } from './token'
|
||||
|
||||
import type { Component, PropType } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import type { ComponentSize } from '@element-plus/constants'
|
||||
import type { SelectContext } from './token'
|
||||
|
||||
@ -369,7 +369,7 @@ export default defineComponent({
|
||||
default: true,
|
||||
},
|
||||
clearIcon: {
|
||||
type: [String, Object] as PropType<string | Component>,
|
||||
type: iconPropType,
|
||||
default: CircleClose,
|
||||
},
|
||||
fitInputWidth: {
|
||||
@ -377,8 +377,8 @@ export default defineComponent({
|
||||
default: false,
|
||||
},
|
||||
suffixIcon: {
|
||||
type: [String, Object] as PropType<string | Component>,
|
||||
default: ArrowUp,
|
||||
type: iconPropType,
|
||||
default: ArrowDown,
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
tagType: { ...tagProps.type, default: 'info' },
|
||||
@ -386,6 +386,14 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
remoteShowSuffix: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
suffixTransition: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
values: placements,
|
||||
|
||||
@ -109,10 +109,15 @@ export const useSelect = (props, states: States, ctx) => {
|
||||
return criteria
|
||||
})
|
||||
const iconComponent = computed(() =>
|
||||
props.remote && props.filterable ? '' : props.suffixIcon
|
||||
props.remote && props.filterable && !props.remoteShowSuffix
|
||||
? ''
|
||||
: props.suffixIcon
|
||||
)
|
||||
const iconReverse = computed(() =>
|
||||
ns.is('reverse', iconComponent.value && states.visible)
|
||||
ns.is(
|
||||
'reverse',
|
||||
iconComponent.value && states.visible && props.suffixTransition
|
||||
)
|
||||
)
|
||||
|
||||
const debounce = computed(() => (props.remote ? 300 : 0))
|
||||
|
||||
@ -84,17 +84,17 @@
|
||||
color: getCssVar('select-input-color');
|
||||
font-size: getCssVar('select-input-font-size');
|
||||
transition: transform getCssVar('transition-duration');
|
||||
transform: rotateZ(180deg);
|
||||
transform: rotateZ(0deg);
|
||||
cursor: pointer;
|
||||
|
||||
@include when(reverse) {
|
||||
transform: rotateZ(0deg);
|
||||
transform: rotateZ(-180deg);
|
||||
}
|
||||
|
||||
@include when(show-close) {
|
||||
font-size: getCssVar('select-font-size');
|
||||
text-align: center;
|
||||
transform: rotateZ(180deg);
|
||||
transform: rotateZ(0deg);
|
||||
border-radius: getCssVar('border-radius-circle');
|
||||
color: getCssVar('select-input-color');
|
||||
transition: getCssVar('transition', 'color');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user