Allow v-menu tooltip to stay active on hover (#7948)

* allow v-menu tooltip to stay active on hover

* remove overlooked code in previous commit
This commit is contained in:
Azri Kahar
2021-09-10 01:57:03 +08:00
committed by GitHub
parent e33d1eca83
commit dbba43efd9

View File

@@ -4,8 +4,8 @@
ref="activator"
class="v-menu-activator"
:class="{ attached }"
@pointerenter="onPointerEnter"
@pointerleave="onPointerLeave"
@pointerenter.stop="onPointerEnter"
@pointerleave.stop="onPointerLeave"
>
<slot
name="activator"
@@ -36,7 +36,12 @@
:style="styles"
>
<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
<div class="v-menu-content" @click.stop="onContentClick">
<div
class="v-menu-content"
@click.stop="onContentClick"
@pointerenter.stop="onPointerEnter"
@pointerleave.stop="onPointerLeave"
>
<slot
v-bind="{
toggle: toggle,
@@ -57,6 +62,7 @@ import { defineComponent, ref, PropType, computed, watch, nextTick } from 'vue';
import { usePopper } from './use-popper';
import { Placement } from '@popperjs/core';
import { nanoid } from 'nanoid';
import { debounce } from 'lodash';
export default defineComponent({
props: {
@@ -241,7 +247,18 @@ export default defineComponent({
}
function useEvents() {
let timeout: ReturnType<typeof setTimeout> | null = null;
const isHovered = ref(false);
watch(
isHovered,
debounce((newHoveredState) => {
if (newHoveredState) {
if (!isActive.value) activate();
} else {
deactivate();
}
}, props.delay)
);
return { onClick, onPointerLeave, onPointerEnter };
@@ -253,20 +270,12 @@ export default defineComponent({
function onPointerEnter() {
if (props.trigger !== 'hover') return;
if (timeout) return;
timeout = setTimeout(() => {
activate();
}, props.delay);
isHovered.value = true;
}
function onPointerLeave() {
if (hoveringOnPopperContent.value === true) return;
if (props.trigger !== 'hover') return;
if (timeout === null) return;
clearTimeout(timeout);
deactivate();
timeout = null;
isHovered.value = false;
}
}
},