fix(components): [select] clearIcon did not work with form statusIcon (#13533)

* fix(components): [select] clearIcon not effect with form statusIcon

* fix(components): [select] add computed value

* fix(components): [select] add comment message

* fix(components): [select] add missing import

* refactor: [select] place selectTagsStyle in useSelect

* fix: [select] remove unused export

* fix: compress code

* fix: fix error
This commit is contained in:
init-qy 2023-08-04 13:19:27 +08:00 committed by GitHub
parent ff87efdb95
commit fe10f7edc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 5 deletions

View File

@ -491,6 +491,8 @@ export default defineComponent({
handleMouseLeave,
showTagList,
collapseTagList,
// computed style
selectTagsStyle,
} = useSelect(props, states, ctx)
const {
@ -555,11 +557,6 @@ export default defineComponent({
),
])
const selectTagsStyle = computed(() => ({
maxWidth: `${unref(inputWidth) - 32}px`,
width: '100%',
}))
const tagTextStyle = computed(() => {
const maxWidth =
unref(inputWidth) > 123

View File

@ -7,6 +7,7 @@ import {
shallowRef,
toRaw,
triggerRef,
unref,
watch,
} from 'vue'
import { isObject, toRawType } from '@vue/shared'
@ -17,6 +18,7 @@ import {
UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import {
ValidateComponentsMap,
debugWarn,
getComponentSize,
isClient,
@ -133,6 +135,14 @@ export const useSelect = (props, states: States, ctx) => {
)
)
// Consistent with the processing of Form in the input component
const showStatusIconAndState = computed(
() =>
form?.statusIcon &&
formItem?.validateState &&
ValidateComponentsMap[formItem?.validateState]
)
const debounce = computed(() => (props.remote ? 300 : 0))
const emptyText = computed(() => {
@ -930,6 +940,15 @@ export const useSelect = (props, states: States, ctx) => {
deleteTag(event, tag)
tagTooltipRef.value?.updatePopper?.()
}
// computed style
// if in form and use statusIcon, the width of the icon needs to be subtracted, fix #13526
const selectTagsStyle = computed(() => ({
maxWidth: `${
unref(states.inputWidth) - 32 - (showStatusIconAndState.value ? 22 : 0)
}px`,
width: '100%',
}))
return {
optionList,
optionsArray,
@ -977,6 +996,9 @@ export const useSelect = (props, states: States, ctx) => {
showTagList,
collapseTagList,
// computed style
selectTagsStyle,
// DOM ref
reference,
input,