vuejs定时任务

原创 zxsclq 随笔 前端基础 635阅读 2018-03-05 18:39:42 举报

定时任务

前一段时间,自己接了一个小项目,中间用到了一个需求。工业的触屏电视机,如果页面长时间无操作,页面就弹出一个类似“欢迎光临”的字样。
当时想了一下,需要用到,定时任务。vuejs可以用监听以及,延迟事件执行任务,如下:

这就是常规的定时任务,然后另一个就是无操作任务。

长时间无操作任务

我这边借助了一下elementUI的框架,无操作任务,这里会借助一个弹窗。我们把需要弹出的值,放弹窗中(记住用那种点击空白处,也会隐藏的弹窗)

这边自己再写个css,吧原有的白色背景去掉,然后改一下字的大小,就能实现,长时间不操作,页面出“hello world”的字样。然后自己,可以根据自己要求,用css把这个字弄点样式。

备注:hideSpan这个事件,是因为,我写完之后,发现,点空白位置,这个字可以隐藏,但是点字上边,就不行,然后就给加了一个

大家可以好好玩玩,大神勿喷!

评论 ( 2 )
最新评论
zxsclq 1F 2018-09-04 11:40:31 2F

嗯嗯,可以的!

天空洁羽 2018-09-03 22:58:17 1F

// 计时器也可以采用如下方式
methods: {
// 计时器函数,每当watch监测到 timestate变化时 就会执行,且 timestate 为1时会自循环
TimerStart () {
setTimeout(()=>{
if(this.TimeState==1){
this.RemainingTime = this.RemainingTime+1;
this.TimerStart();
}
},1000);
}
},
mounted(){
this.TimeState = 1
// TimeState = 1,启动计时 , 2 , 计时清零, else 停止计时
},
watch: {
TimeState: function() {
if(this.TimeState==1){
this.TimerStart()
}
else if(this.TimeState==2) {
this.RemainingTime = 0
}
}
}