test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-05 04:37:47 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(slider): fix behavior of tooltip (#1443)

Browse Source 
* fix(slider): fix behavior of tooltip

* test: add test
This commit is contained in:
kooriookami 2021-02-08 15:15:27 +08:00 committed by GitHub
parent d7341b0fec
commit 3313cec581
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/dropdown/__tests__/dropdown.spec.tsx
View File

@ -339,4 +339,34 @@ describe('Dropdown', () => {
const scrollbar = content.findComponent({ ref: 'scrollbar' })
expect(scrollbar.find('.el-scrollbar__wrap').attributes('style')).toContain('max-height: 60px;')
})
test('tooltip debounce', async () => {
const wrapper = _mount(
`
<el-dropdown ref="b">
<span class="el-dropdown-link">
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item>Peach</el-dropdown-item>
<el-dropdown-item>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
`,
() => ({}),
)
const content = wrapper.findComponent({ ref: 'b' }).vm as any
const triggerElm = wrapper.find('.el-dropdown-link')
expect(content.visible).toBe(false)
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await triggerElm.trigger(MOUSE_LEAVE_EVENT)
await triggerElm.trigger(MOUSE_ENTER_EVENT)
await sleep(TIMEOUT)
expect(content.visible).toBe(true)
})
})

22
packages/slider/src/useSliderButton.ts
View File

@ -2,7 +2,7 @@ import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
import { off, on } from '@element-plus/utils/dom'
import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue'
import { ISliderButtonInitData, ISliderButtonProps, ISliderProvider } from './slider.type'
import debounce from 'lodash/debounce'
const useTooltip = (props: ISliderButtonProps, formatTooltip: ComputedRef<(value: number) => number | string>, showTooltip: ComputedRef<boolean>) => {
@ -18,13 +18,13 @@ const useTooltip = (props: ISliderButtonProps, formatTooltip: ComputedRef<(value
return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue
})
const displayTooltip = () => {
const displayTooltip = debounce(() => {
showTooltip.value && (tooltipVisible.value = true)
}
}, 50)
const hideTooltip = () => {
const hideTooltip = debounce(() => {
showTooltip.value && (tooltipVisible.value = false)
}
}, 50)
return {
tooltip,
@ -35,7 +35,6 @@ const useTooltip = (props: ISliderButtonProps, formatTooltip: ComputedRef<(value
}
}
export const useSliderButton = (props: ISliderButtonProps, initData: ISliderButtonInitData, emit) => {
const {
disabled,
@ -60,14 +59,13 @@ export const useSliderButton = (props: ISliderButtonProps, initData: ISliderButt
} = useTooltip(props, formatTooltip, showTooltip)
const currentPosition = computed(() => {
return `${ (props.modelValue - min.value) / (max.value - min.value) * 100 }%`
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`
})
const wrapperStyle = computed(() => {
return (props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value }) as CSSStyleDeclaration
})
const handleMouseEnter = () => {
initData.hovering = true
displayTooltip()
@ -75,7 +73,9 @@ export const useSliderButton = (props: ISliderButtonProps, initData: ISliderButt
const handleMouseLeave = () => {
initData.hovering = false
hideTooltip()
if (!initData.dragging) {
hideTooltip()
}
}
const onButtonDown = (event: MouseEvent | TouchEvent) => {
@ -165,7 +165,9 @@ export const useSliderButton = (props: ISliderButtonProps, initData: ISliderButt
*/
setTimeout(() => {
initData.dragging = false
hideTooltip()
if (!initData.hovering) {
hideTooltip()
}
if (!initData.isClick) {
setPosition(initData.newPosition)
emitChange()