以下效果是通过防抖实现。当然了 肯定还有其它更好的方法,纯纯是太懒了,不想找了。
一定要注意css样式的优先级,不要写行内样式,当鼠标不能隐藏的时候一定是目标优先级太高。
mounted() {
// 添加鼠标移动事件监听器
window.addEventListener('mousemove', this.handleMouseMove);
this.handleMouseMove();
},
methods: {
handleMouseMove(e) {
let count = 0;
document.body.style.cursor = 'auto';
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
count++;
if(count > 0) {
document.body.style.cursor = 'none';
}
}, 15000);
},
},
beforeDestroy() {
// 组件销毁时移除事件监听器
window.removeEventListener('mousemove', this.handleMouseMove);
}
如果报 timeout is not defined ,一定是我代码有问题,不要怀疑你自己。说明作者还得练。
感谢观看!!!