javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [select] style break change in multiple collapseTags (#15460)

Browse Source 
* fix(components): [select] style break change in multiple collapseTags

* fix(components): [select-v2] style break change in multiple collapseTags

* fix(components): [select & select-v2] popover updated
This commit is contained in:
赵添
2024-01-15 15:43:17 +08:00
committed by GitHub
parent f60db10134
commit a01b05d39c
5 changed files with 65 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/components/select-v2/src/select.vue
View File

@@ -83,12 +83,15 @@
:teleported="teleported"
>
<template #default>
<div :class="nsSelect.e('selected-item')">
<div
ref="collapseItemRef"
:class="nsSelect.e('selected-item')"
>
<el-tag
:closable="false"
:size="collapseTagSize"
:type="tagType"
:style="tagStyle"
:style="collapseTagStyle"
disable-transitions
>
<span :class="nsSelect.e('tags-text')">

27
packages/components/select-v2/src/useSelect.ts
View File

@@ -67,6 +67,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
inputHovering: false,
selectionWidth: 0,
calculatorWidth: 0,
collapseItemWidth: 0,
previousQuery: null,
previousValue: undefined,
selectedLabel: '',
@@ -89,6 +90,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
const suffixRef = ref<HTMLElement>(null)
const menuRef = ref<HTMLElement>(null)
const tagMenuRef = ref<HTMLElement>(null)
const collapseItemRef = ref<HTMLElement>(null)
const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
inputRef,
@@ -244,7 +246,23 @@ const useSelect = (props: ISelectV2Props, emit) => {
popperSize.value = selectRef.value?.offsetWidth || 200
}
const getGapWidth = () => {
if (!selectionRef.value) return 0
const style = window.getComputedStyle(selectionRef.value)
return Number.parseFloat(style.gap || '6px')
}
// computed style
const tagStyle = computed(() => {
const gapWidth = getGapWidth()
const maxWidth =
collapseItemRef.value && props.maxCollapseTags === 1
? states.selectionWidth - states.collapseItemWidth - gapWidth
: states.selectionWidth
return { maxWidth: `${maxWidth}px` }
})
const collapseTagStyle = computed(() => {
return { maxWidth: `${states.selectionWidth}px` }
})
@@ -446,6 +464,11 @@ const useSelect = (props: ISelectV2Props, emit) => {
states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
}
const resetCollapseItemWidth = () => {
states.collapseItemWidth =
collapseItemRef.value.getBoundingClientRect().width
}
const updateTooltip = () => {
tooltipRef.value?.updatePopper?.()
}
@@ -807,7 +830,9 @@ const useSelect = (props: ISelectV2Props, emit) => {
useResizeObserver(selectionRef, resetSelectionWidth)
useResizeObserver(calculatorRef, resetCalculatorWidth)
useResizeObserver(menuRef, updateTooltip)
useResizeObserver(wrapperRef, updateTooltip)
useResizeObserver(tagMenuRef, updateTagTooltip)
useResizeObserver(collapseItemRef, resetCollapseItemWidth)
return {
// data exports
@@ -823,6 +848,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
iconComponent,
iconReverse,
tagStyle,
collapseTagStyle,
inputStyle,
popperSize,
dropdownMenuVisible,
@@ -848,6 +874,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
selectionRef,
prefixRef,
suffixRef,
collapseItemRef,
popperRef,

3
packages/components/select/__tests__/select.test.ts
View File

@@ -1149,8 +1149,9 @@ describe('Select', () => {
options[1].click()
await nextTick()
options[2].click()
selectRef.vm.states.collapseItemWidth = 38
await nextTick()
expect(tagWrapperDom.style.maxWidth).toBe('200px')
expect(tagWrapperDom.style.maxWidth).toBe('156px')
})
test('multiple select with collapseTagsTooltip', async () => {

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

@@ -83,13 +83,16 @@
:teleported="teleported"
>
<template #default>
<div :class="nsSelect.e('selected-item')">
<div
ref="collapseItemRef"
:class="nsSelect.e('selected-item')"
>
<el-tag
:closable="false"
:size="collapseTagSize"
:type="tagType"
disable-transitions
:style="tagStyle"
:style="collapseTagStyle"
>
<span :class="nsSelect.e('tags-text')">
+ {{ states.selected.length - maxCollapseTags }}

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

@@ -66,6 +66,7 @@ export const useSelect = (props: ISelectProps, emit) => {
selected: props.multiple ? [] : ({} as any),
selectionWidth: 0,
calculatorWidth: 0,
collapseItemWidth: 0,
selectedLabel: '',
hoveringIndex: -1,
previousQuery: null,
@@ -96,6 +97,7 @@ export const useSelect = (props: ISelectProps, emit) => {
const suffixRef = ref<HTMLElement>(null)
const menuRef = ref<HTMLElement>(null)
const tagMenuRef = ref<HTMLElement>(null)
const collapseItemRef = ref<HTMLElement>(null)
const scrollbarRef = ref<{
handleScroll: () => void
} | null>(null)
@@ -473,6 +475,11 @@ export const useSelect = (props: ISelectProps, emit) => {
states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
}
const resetCollapseItemWidth = () => {
states.collapseItemWidth =
collapseItemRef.value.getBoundingClientRect().width
}
const updateTooltip = () => {
tooltipRef.value?.updatePopper?.()
}
@@ -757,8 +764,23 @@ export const useSelect = (props: ISelectProps, emit) => {
}
}
const getGapWidth = () => {
if (!selectionRef.value) return 0
const style = window.getComputedStyle(selectionRef.value)
return Number.parseFloat(style.gap || '6px')
}
// computed style
const tagStyle = computed(() => {
const gapWidth = getGapWidth()
const maxWidth =
collapseItemRef.value && props.maxCollapseTags === 1
? states.selectionWidth - states.collapseItemWidth - gapWidth
: states.selectionWidth
return { maxWidth: `${maxWidth}px` }
})
const collapseTagStyle = computed(() => {
return { maxWidth: `${states.selectionWidth}px` }
})
@@ -776,7 +798,9 @@ export const useSelect = (props: ISelectProps, emit) => {
useResizeObserver(selectionRef, resetSelectionWidth)
useResizeObserver(calculatorRef, resetCalculatorWidth)
useResizeObserver(menuRef, updateTooltip)
useResizeObserver(wrapperRef, updateTooltip)
useResizeObserver(tagMenuRef, updateTagTooltip)
useResizeObserver(collapseItemRef, resetCollapseItemWidth)
onMounted(() => {
setSelected()
@@ -841,6 +865,7 @@ export const useSelect = (props: ISelectProps, emit) => {
// computed style
tagStyle,
collapseTagStyle,
inputStyle,
// DOM ref
@@ -857,5 +882,6 @@ export const useSelect = (props: ISelectProps, emit) => {
scrollbarRef,
menuRef,
tagMenuRef,
collapseItemRef,
}
}