前端开发Vuejs定时任务

web前端开发使用的软件下载
公司常用的前端开发软件
前端开发啥软件好用
手机开发前端的软件

定时任务

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

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <!– import css –>
        <link
            rel=”stylesheet”
            href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css
        />
    </head>
    <body>
        <div id=”app”>
            <h1>{{ number }}</h1>
        </div>
    </body>
    <!– import vue before Element –>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
    <!– import JavaScript –>
    <script src=”https://unpkg.com/element-ui/lib/index.js”></script>
    <script>
        new vue({
            el: ‘#app’,
            data: function() {
                return {
                    number: 0,
                }
            },
            mounted: function() {
                setTimeout(() => {
                    this.number = this.number + 1
                }, 1000) //这里是vuejs延时事件,大家应该知道,这边的1000单位为毫秒,也就是1000就代表一秒,然后自己需要别的时间,就直接乘。例如:15分钟,就是1000*60*15
            },
            watch: {
                //页面初始化过一秒,这个number就会变成2
                //然后在这里执行一个,number的监听,同样也做个监听,就会变成定时任务了
                number() {
                    setTimeout(() => {
                        this.number = this.number + 1
                    }, 1000)
                },
            },
        })
    </script>
</html>

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

长时间无操作任务

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

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <!– import css –>
        <link
            rel=”stylesheet”
            href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css
        />
    </head>
    <body>
        <div id=”app”>
            <h1>{{ number }}</h1>
            <el-dialog :visible.sync=”centerDialogVisible” width=”30%” center>
                <span @click=”hideSpan”>{{ test }}</span>
            </el-dialog>
        </div>
    </body>
    <!– import vue before Element –>
    <script src=”https://unpkg.com/vue/dist/vue.js”></script>
    <!– import JavaScript –>
    <script src=”https://unpkg.com/element-ui/lib/index.js”></script>
    <script>
        new Vue({
            el: ‘#app’,
            data: function() {
                return {
                    number: 0,
                    test: ‘Hello world’,
                    centerDialogVisible: true,
                }
            },
            mounted: function() {
                setTimeout(() => {
                    this.number = this.number + 1
                }, 1000) //这里是vuejs延时事件,大家应该知道,这边的1000单位为毫秒,也就是1000就代表一秒,然后自己需要别的时间,就直接乘。例如:15分钟,就是1000*60*15
            },
            watch: {
                //页面初始化过一秒,这个number就会变成2
                //然后在这里执行一个,number的监听,同样也做个监听,就会变成定时任务了
                number() {
                    setTimeout(() => {
                        this.centerDialogVisible = true
                        this.number = this.number + 1
                    }, 5000) //这边五秒钟无操作,这个弹窗就会出现,当我们把弹窗关闭之后,定时就会重新计时
                },
                centerDialogVisible() {
                    if (this.centerDialogVisible == true) {
                        this.timeNum = this.timeNum + 1
                    }
                },
            },
            methods: {
                hideSpan() {
                    this.centerDialogVisible = false
                },
            },
        })
    </script>
</html>

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

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

软件开发前端知识视频
web前端开发的软件
软件开发的前端和后端
前端软件开发岗位职责
» 本文来自:前端开发者 » 《前端开发Vuejs定时任务》
» 本文链接地址:https://www.rokub.com/6694.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!