vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)

鼠标停留后，显示计算模块悬浮块如下

但鼠标停留在td单元格内，两秒后将出现悬浮 div,移出将隐藏

复制完整代码直接可用 (index.html),无需node环境

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- vue --><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<style>.block-compute {width: 10rem;height: 5rem;background: #f8f9fa;border-radius: 1rem;color: #343a40;border: 1px solid;border-color: #343a40;position: absolute;}
</style><body><div id="app"><div class="block-compute" v-show="showPop" v-bind:style="{ left: pageX+'px',top: pageY+'px' }">{{pageX}}</div><div class="table-responsive"><table class="table table-bordered"><thead><tr><th>Data Time</th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th><th>3</th><th>1</th><th>2</th><th>3</th></tr></thead><tbody><tr><td>2022-10-18</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">999</td></tr><tr><td>2022-10-19</td><td @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave" @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">888</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">0</td></tr><tr><td>2022-10-20</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td><td @mouseenter="enter" @mouseleave="leave">777</td><td @mouseenter="enter" @mouseleave="leave">666</td><td @mouseenter="enter" @mouseleave="leave">0</td></tr></tbody></table></table></div><script>new Vue({el: '#app',data: {message: 'Hello Vue.js!',showPop: false,pageX: 0,pageY: 0,timeoutId: null,},methods: {enter: function (e) {if (!this.timeoutId) {this.timeoutId = window.setTimeout(() => {this.timeoutId = null;let { pageX, pageY } = e;this.pageX = pageX;this.pageY = pageY;this.showPop = true;}, 2000); //停顿两秒}},leave: function (e) {this.showPop = false;window.clearTimeout(this.timeoutId);this.timeoutId = null;}}, destroyed() {window.clearTimeout(this.timeoutId);}})</script>
</body></html>

搜索内容:
鼠标放在td单元格两秒后，显示计算悬浮块
vue使用table鼠标移动到单元格后,显示悬浮div
vue 悬浮块跟随鼠标移动
html鼠标停留几秒后，显示悬浮框并计算td内容显示
html鼠标放在table中，显示计算悬浮框

vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)相关推荐

我的世界服务器连接显示不见了,我的世界服务器为什么进去就卡，然后几十秒后显示“连接已丢失”怎么? 爱问知识人...
2017-10-27 04:06:05 不是网络的问题,可能那个服务器已关闭了,或者崩了的情况. 可能您不知道,服主注册服务器需要花钱,花多少都开不了永久的! ? ? ? ? ? ? ? ? ? ? ...
html图片5秒后消失,如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
如何让网页中图片等待5秒再显示. 网页打开的时候,网页中的图片就会马上显示.如何让某一个图片,在网页打开后5秒在显示出来. 回复讨论(解决方案) 1. 图片载入有判别事件,在事件中设置图片对象的显示隐 ...
jquery实现停留半秒后再选择
jquery实现tab停留半秒后,选中菜单.切换tab下的内容: var showHandler=null; function init(){$("#tab_ul").find(& ...
vue跳转页面增加等待_vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ 提交 export default { data(){ return { count:"",//倒计时 } } }, mounted(){ ...
解决方法记录之华硕台式电脑无法开机，开机黑屏，只能显示鼠标，并20秒后自动关机
台式电脑无法开机,开机黑屏,只能显示鼠标,并20秒后自动关机: 解决思路先看风扇是否停转,水冷的灯是否正常亮着–都正常 ①先重置biOS试一下行不行? ②如果不行,就看一下固态插没插好, ③如果固态 ...
php 停留3秒,php怎么实现停留几秒后跳转
php怎么实现停留几秒后跳转2021-03-17 19:32:28 php实现停留几秒后跳转的方法:1.通过"header("refresh:5;url=...");&q ...
悬挂式Notification 停留几秒后自动消失且保留状态栏的通知（自定义消息）
思路:通知目前有三种普通通知折叠式通知悬挂式通知我现在想让app弹出悬挂式通知 ,醒目些,通知自动消失或手动划除后,下滑状态栏我还想看到通知: 只用普通的通知,只能在状态栏提示,提示不够明显 ...
vue鼠标移动上去提示_关于如何处理vue中鼠标悬停事件的详细说明
最后,在查看结果中,发现滑过鼠标事件将触发该事件,但它将闪烁并清除. 当鼠标停留在单元格上时鼠标滑过事件,遮罩层将消失并重复出现. 开关. 为了缓解这种情况,setTimeout也用于延迟显示和隐藏在 ...
setwindowshookex回调函数不执行_不一样的“悬停几秒后执行函数”？一个开源工具函数，请注意查收...
大家好,我是 vortesnail. 前言: 最近这几个星期,一直都在维护自己的基于 React 的开源播放器组件,以为功能基本都差不多了,却忽视了播放器一个很重要的功能:鼠标悬停在视频播放界面时,在 ...

vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)

复制完整代码直接可用 (index.html),无需node环境

vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)相关推荐

最新文章

热门文章