mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [cascader] multiple selection mode tag causes height change (#18285)

Browse Source 
* fix(style): [cascader] fix style

* fix(style): [cascader] gap

* fix: update

* style: update

* fix: update

* style: update

* fix: update

* style: update

* style: update
This commit is contained in:
jiaxiang 2024-11-22 22:18:41 +08:00 committed by GitHub
parent 209a803df8
commit 8942354083
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -309,7 +309,7 @@ const currentPlaceholder = computed(() =>
)
const realSize = useFormSize()
const tagSize = computed(() =>
['small'].includes(realSize.value) ? 'small' : 'default'
realSize.value === 'small' ? 'small' : 'default'
)
const multiple = computed(() => !!props.props.multiple)
const readonly = computed(() => !props.filterable || multiple.value)
@ -407,7 +407,6 @@ const updatePopperPosition = () => {
tooltipRef.value?.updatePopper()
})
}
const hideSuggestionPanel = () => {
filtering.value = false
}
@ -524,9 +523,10 @@ const updateStyle = () => {
if (tagWrapperEl) {
const { offsetHeight } = tagWrapperEl
// 2 is el-input__wrapper padding
const height =
presentTags.value.length > 0
? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`
? `${Math.max(offsetHeight, inputInitialHeight) - 2}px`
: `${inputInitialHeight}px`
inputInner.style.height = height
updatePopperPosition()

22
packages/theme-chalk/src/cascader.scss
View File

@ -9,7 +9,6 @@
display: inline-flex;
align-items: center;
max-width: 100%;
margin: 2px 0 2px 6px;
text-overflow: ellipsis;
background: $background-color;
@ -42,6 +41,10 @@
background-color: getCssVar('text-color', 'secondary');
}
}
& + input {
margin-left: 0;
}
}
}
@ -113,6 +116,16 @@
@include m($size) {
font-size: map.get($input-font-size, $size);
line-height: map.get($input-height, $size);
@include e(tags) {
gap: map.get($cascader-item-gap, $size);
padding: map.get($cascader-wrapper-padding, $size);
}
@include e(search-input) {
height: map.get($cascader-item-height, $size);
margin-left: map.get($cascader-search-input-margin-left, $size);
}
}
}
@ -150,6 +163,8 @@
transform: translateY(-50%);
display: flex;
flex-wrap: wrap;
padding: map.get($cascader-wrapper-padding, 'default');
gap: map.get($cascader-item-gap, 'default');
line-height: normal;
text-align: left;
box-sizing: border-box;
@ -211,15 +226,14 @@
@include e(search-input) {
flex: 1;
height: 24px;
height: map.get($cascader-item-height, 'default');
min-width: 60px;
margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
margin-left: map.get($cascader-search-input-margin-left, 'default');
padding: 0;
color: getCssVar('cascader', 'menu-text-color');
border: none;
outline: none;
box-sizing: border-box;
background: transparent;
&::placeholder {

41
packages/theme-chalk/src/common/var.scss
View File

@ -662,6 +662,47 @@ $cascader: map.merge(
),
$cascader
);
$cascader-item-gap: () !default;
$cascader-item-gap: map.merge(
(
'large': 6px,
'default': 6px,
'small': 4px,
),
$cascader-item-gap
);
$cascader-wrapper-padding: () !default;
$cascader-wrapper-padding: map.merge(
(
'large': 8px,
'default': 4px,
'small': 2px,
),
$cascader-wrapper-padding
);
$cascader-item-height: () !default;
$cascader-item-height: map.merge(
(
'large': 24px,
'default': 24px,
'small': 20px,
),
$cascader-item-height
);
$cascader-search-input-margin-left: () !default;
$cascader-search-input-margin-left: map.merge(
(
'large': 7px,
'default': 7px,
'small': 5px,
),
$cascader-search-input-margin-left
);
//statistic
// css3 var in packages/theme-chalk/src/statistic.scss
$statistic: () !default;