【发布时间】：2022-01-25 14:19:29
【问题描述】：
我目前正在为我们的工作室构建一个新网站，但无法让自定义光标正常工作。这是一个用 gsap 构建的自定义光标，结果很好，除了当我导航到另一条路线并返回主页时，mouseover 事件停止工作，我找不到原因。
可能是什么原因造成的，如何解决？
提前谢谢你！
这是 CustomCursor 组件：
<template>
<div class="custom-cursor">
<div id="cursor-big" class="custom-cursor__ball custom-cursor__ball--big"></div>
<div id="cursor-small" class="custom-cursor__ball custom-cursor__ball--small"></div>
</div>
</template>
<script>
import gsap from "gsap";
export default {
props: {
hoverClass: {
type: String,
default: 'cursorHover'
}
},
mounted () {
const cursorBig = document.getElementById('cursor-big'),
cursorSmall = document.getElementById('cursor-small'),
links = document.getElementsByTagName("a"),
withClassHover = document.getElementsByClassName(this.hoverClass),
withHover = [...links, ...withClassHover];
// Event Listeners
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mousedown", onMouseHover);
document.addEventListener("mouseup", onMouseHoverOut);
document.addEventListener("mouseenter", () => {
cursorBig.style.opacity = 1;
cursorSmall.style.opacity = 1;
});
document.addEventListener("mouseleave", () => {
cursorBig.style.opacity = 0;
cursorSmall.style.opacity = 0;
});
withHover.forEach((element) => {
element.addEventListener("mouseover", onMouseHover);
element.addEventListener("mouseout", onMouseHoverOut);
})
// Event Handlers
function onMouseMove(e) {
cursorSmall.style.opacity = 1;
gsap.to(cursorBig, 0.4, {
x: e.clientX - 18.5,
y: e.clientY - 18.5
});
gsap.to(cursorSmall, 0.1, {
x: e.clientX - 4,
y: e.clientY - 4
});
}
function onMouseHover() {
gsap.to(cursorBig, 0.3, {
scale: 3,
});
}
function onMouseHoverOut() {
gsap.to(cursorBig, 0.3, {
scale: 1,
});
}
}
};
</script>
<style>
@media screen and (min-width:1100px) {
* {
cursor: none !important;
}
.custom-cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.custom-cursor__ball--big {
content: "";
width: 35px;
height: 35px;
background: white;
border-radius: 50%;
}
.custom-cursor__ball--small {
content: "";
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
}
}
</style>
【问题讨论】：
-
mounted 只会触发一次，当你离开其他地方时，dom 元素会丢失，然后一旦你回来，事件就不再附加到元素上，因为它们被破坏了。
-
好的，谢谢您的解释！那我应该用哪个钩子呢？
-
没有可以使用的钩子，您需要在模板中在
<Nuxt/>之外调用此组件，这样它就不会被破坏，或者通过在其上添加 v-if 来确保它被完全破坏，或者一个随机化道具:instance="Math.random()"，当你创建它时，它在instance上有一个观察者来重新调用处理程序，然后你添加所有的beforeDestroy钩子来删除自定义事件处理程序，添加onMouseMove，onMouseHover，onMouseHoverOut作为方法添加mouseenter， mouseleave 方法和其他方法一样，将 cursorBig 和 cursorSmall 设置为数据，然后创建一个您调用的 init 方法 -
如果我使用 v-if 解决方案，我如何告诉 v-if 何时显示以及何时隐藏？
-
看看我的例子，它对我有用，你是在新窗口中打开吗？
标签： javascript vue.js nuxt.js addeventlistener gsap