如何将Vue鼠标悬停事件监听改写成长尾?

2026-04-02 07:150阅读0评论SEO资讯
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计500个文字,预计阅读时间需要2分钟。

如何将Vue鼠标悬停事件监听改写成长尾?

目录+前言+场景描述+解决方案+总结+前言+开发框架为vue2.x+场景描述+需求是:页面在鼠标悬停(不动)n秒后,页面进行相应的事件。例如在我的需求下,鼠标悬停15秒后。

目录
  • 前言
  • 情景描述
  • 解决方法
  • 总结

前言

开发框架为 vue2.x

情景描述

需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件。

比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示。

解决方法

我的思路中 涉及到了三个变量

如何将Vue鼠标悬停事件监听改写成长尾?

data(){ return { polling: null, timeCount: 0, judgeTimer: null, } }

polling: 是 轮询的时候的一个计时器
timeCount: 是 判断鼠标是否移动的一个控制变量
judgeTimer:是 判断鼠标是否移动的一个计时器

只要鼠标进行了移动,那么 timeCount就会发生变化。

阅读全文

本文共计500个文字,预计阅读时间需要2分钟。

如何将Vue鼠标悬停事件监听改写成长尾?

目录+前言+场景描述+解决方案+总结+前言+开发框架为vue2.x+场景描述+需求是:页面在鼠标悬停(不动)n秒后,页面进行相应的事件。例如在我的需求下,鼠标悬停15秒后。

目录
  • 前言
  • 情景描述
  • 解决方法
  • 总结

前言

开发框架为 vue2.x

情景描述

需求是这样的:页面在鼠标悬停(不动)n秒之后,页面进行相应的事件。

比如在我的需求下,是鼠标悬停15秒之后,页面上三个数据弹窗轮询展示。

解决方法

我的思路中 涉及到了三个变量

如何将Vue鼠标悬停事件监听改写成长尾?

data(){ return { polling: null, timeCount: 0, judgeTimer: null, } }

polling: 是 轮询的时候的一个计时器
timeCount: 是 判断鼠标是否移动的一个控制变量
judgeTimer:是 判断鼠标是否移动的一个计时器

只要鼠标进行了移动,那么 timeCount就会发生变化。

阅读全文