提交 7619430d 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

fix(button,navigator,view): hover-class 不支持 pc 端鼠标事件问题

上级 e4a2f485
......@@ -40,7 +40,20 @@ export function useHover(props: UseHoverOptions) {
}, parseInt(props.hoverStayTime as string))
})
}
function onTouchstartPassive(evt: TouchEvent) {
if (evt.touches.length > 1) {
return
}
handleHover(evt)
}
function onMousedown(evt: MouseEvent) {
handleHover(evt)
window.addEventListener('mouseup', handlePCHoverEnd)
}
function handleHover(evt: TouchEvent | MouseEvent) {
// TODO detect scrolling
if ((evt as any)._hoverPropagationStopped) {
return
......@@ -48,9 +61,6 @@ export function useHover(props: UseHoverOptions) {
if (!props.hoverClass || props.hoverClass === 'none' || props.disabled) {
return
}
if (evt.touches.length > 1) {
return
}
if (props.hoverStopPropagation) {
;(evt as any)._hoverPropagationStopped = true
}
......@@ -63,12 +73,27 @@ export function useHover(props: UseHoverOptions) {
}
}, parseInt(props.hoverStartTime as string))
}
function onTouchend() {
handleHoverEnd()
}
function onMouseup() {
handlePCHoverEnd()
}
function handleHoverEnd() {
hoverTouch = false
if (hovering.value) {
hoverReset()
}
}
function handlePCHoverEnd() {
handleHoverEnd()
window.removeEventListener('mouseup', handlePCHoverEnd)
}
function onTouchcancel() {
hoverTouch = false
hovering.value = false
......@@ -78,7 +103,9 @@ export function useHover(props: UseHoverOptions) {
hovering,
binding: {
onTouchstartPassive,
onMousedown,
onTouchend,
onMouseup,
onTouchcancel,
},
}
......
......@@ -25,20 +25,20 @@ export default /*#__PURE__*/ defineBuiltInComponent({
return () => {
const { hoverClass, url } = props
const hasHoverClass = props.hoverClass && props.hoverClass !== 'none'
return (
<a class="navigator-wrap" href={url} onClick={onEventPrevent}>
<uni-navigator
class={hasHoverClass && hovering.value ? hoverClass : ''}
{...(hasHoverClass && binding)}
{...(vm ? vm.attrs : {})}
{...{
[__scopeId]: '',
}}
onClick={onClick}
>
{slots.default && slots.default()}
</uni-navigator>
</a>
<uni-navigator
class={hasHoverClass && hovering.value ? hoverClass : ''}
{...(hasHoverClass && binding)}
{...(vm ? vm.attrs : {})}
{...{
[__scopeId]: '',
}}
onClick={onClick}
>
<a class="navigator-wrap" href={url} onClick={onEventPrevent}></a>
{slots.default && slots.default()}
</uni-navigator>
)
}
},
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册