找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发Vuejs定时任务

2018-11-23 分类：Vue.js 阅读(1524) 评论(0)
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前端开发的软件
软件开发的前端和后端
前端软件开发岗位职责
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论