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): [el-select] support suffix-icon (#4364)

Browse Source
This commit is contained in:
C.Y.Kun 2021-11-12 14:27:51 +08:00 committed by GitHub
parent 7541a6f9c8
commit 87a06ddcdf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| 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 |
## Select Events

11
packages/components/select/__tests__/select.spec.ts
View File

@ -2,7 +2,7 @@ import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { sleep } from '@element-plus/test-utils'
import { EVENT_CODE } from '@element-plus/utils/aria'
import { CircleClose } from '@element-plus/icons'
import { CircleClose, ArrowUp, CaretTop } from '@element-plus/icons'
import Select from '../src/select.vue'
import Group from '../src/option-group.vue'
import Option from '../src/option.vue'
@ -540,6 +540,15 @@ describe('Select', () => {
expect(vm.value).toBe('')
})
test('suffix icon', async () => {
const wrapper = _mount(`<el-select></el-select>`)
let suffixIcon = wrapper.findComponent(ArrowUp)
expect(suffixIcon.exists()).toBe(true)
await wrapper.setProps({ suffixIcon: CaretTop })
suffixIcon = wrapper.findComponent(CaretTop)
expect(suffixIcon.exists()).toBe(true)
})
test('fitInputWidth', async () => {
const wrapper = getSelectVm({ fitInputWidth: true })
const selectWrapper = wrapper.findComponent({ name: 'ElSelect' })

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

@ -234,7 +234,7 @@ import {
removeResizeListener,
} from '@element-plus/utils/resize-event'
import { isValidComponentSize } from '@element-plus/utils/validators'
import { CircleClose } from '@element-plus/icons'
import { CircleClose, ArrowUp } from '@element-plus/icons'
import ElOption from './option.vue'
import ElSelectMenu from './select-dropdown.vue'
import { useSelect, useSelectStates } from './useSelect'
@ -315,6 +315,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
suffixIcon: {
type: [String, Object] as PropType<string | Component>,
default: ArrowUp,
},
},
emits: [
UPDATE_MODEL_EVENT,

3
packages/components/select/src/useSelect.ts
View File

@ -19,7 +19,6 @@ import scrollIntoView from '@element-plus/utils/scroll-into-view'
import { isKorean } from '@element-plus/utils/isDef'
import { getValueByPath, useGlobalConfig } from '@element-plus/utils/util'
import { elFormKey, elFormItemKey } from '@element-plus/tokens'
import { ArrowUp } from '@element-plus/icons'
import type { QueryChangeCtx, SelectOptionProxy } from './token'
import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
@ -96,7 +95,7 @@ export const useSelect = (props, states: States, ctx) => {
return criteria
})
const iconComponent = computed(() =>
props.remote && props.filterable ? '' : ArrowUp
props.remote && props.filterable ? '' : props.suffixIcon
)
const iconReverse = computed(() =>
iconComponent.value && states.visible ? 'is-reverse' : ''