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

fix(components): [cascader] reactive size change (#12294)

Browse Source 
* fix(components): [cascader] reactive size change

* fix(components): [cascader] update style after calc

* fix(components): [cascader] add test

* fix(components): [cascader] mock offsetHeight

* fix(components): [cascader] size type

* fix(components): [cascader] spy on getter for height

* fix(components): [cascader] mock css var

* fix(components): [cascader] add comment
This commit is contained in:
井柏然 2023-07-23 20:30:23 +08:00 committed by GitHub
parent ee705e5c2d
commit f93a9eb6cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/components/cascader/__tests__/cascader.test.tsx
View File

@ -448,4 +448,28 @@ describe('Cascader.vue', () => {
await nextTick()
expect(dropdown?.style.display).not.toBe('none')
})
test('height should be changed by size when multiple', async () => {
const cascaderSize = ref<'small' | 'default' | 'large'>('default')
const props = { multiple: true }
const wrapper = _mount(() => (
<Cascader props={props} size={cascaderSize.value} />
))
await nextTick()
const inputEl = wrapper.find('input').element as HTMLElement
const sizeMap: Record<string, number> = {
small: 24,
default: 32,
large: 40,
}
for (const size in sizeMap) {
cascaderSize.value = size as 'small' | 'default' | 'large'
inputEl.style.setProperty('--el-input-height', `${sizeMap[size]}px`)
// first is wait for the watch callback function of realSize which is to be called after nextTick
await nextTick()
// second is wait for input to set the height attribute
await nextTick()
expect(inputEl.style.height).toEqual(`${sizeMap[size] - 2}px`)
}
})
})

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

@ -660,6 +660,11 @@ const handleInput = (val: string, e?: KeyboardEvent) => {
val ? handleFilter() : hideSuggestionPanel()
}
const getInputInnerHeight = (inputInner: HTMLElement): number =>
Number.parseFloat(
useCssVar(nsInput.cssVarName('input-height'), inputInner).value
) - 2
watch(filtering, updatePopperPosition)
watch([checkedNodes, isDisabled], calculatePresentTags)
@ -668,15 +673,19 @@ watch(presentTags, () => {
nextTick(() => updateStyle())
})
watch(realSize, async () => {
await nextTick()
const inputInner = input.value!.input!
inputInitialHeight = getInputInnerHeight(inputInner) || inputInitialHeight
updateStyle()
})
watch(presentText, syncPresentTextValue, { immediate: true })
onMounted(() => {
const inputInner = input.value!.input!
const inputInnerHeight =
Number.parseFloat(
useCssVar(nsInput.cssVarName('input-height'), inputInner).value
) - 2
const inputInnerHeight = getInputInnerHeight(inputInner)
inputInitialHeight = inputInner.offsetHeight || inputInnerHeight
useResizeObserver(inputInner, updateStyle)