mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-12 12:25:22 +08:00
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:
parent
ff87efdb95
commit
fe10f7edc0
@ -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
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user