Vue组件页做定时刷新功能

demo效果

声明data

scheduleSearch: {
        task: 0, // 定时器对象，初始值应该可以写为null
        status: false // 定时器状态
      }

引入组件标签，这里根据不同的组件库使用不同的组件即可。通过status进行开关状态显示效果的绑定

<el-switch
	v-model="scheduleSearch.status"
    style="float: right;"
    active-text="开启定时刷新"
    @change="openScheduleSearch"
  />

开关组件的切换事件响应

openScheduleSearch(status) {
      if (status) {
        this.scheduleSearch.task = setInterval(() => {
          this.getList()
        }, 5000)
      } else {
        clearInterval(this.scheduleSearch.task)
      }
    },

组件销毁前清除定时器

 beforeDestroy() {
    clearInterval(this.scheduleSearch.task)
 },

如果要显示刷新时间，可直接使用标签显示

本次刷新时间：{{ new Date().toLocaleString() }}

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_38800446/article/details/115322063
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-12 18:22:14
阅读 ( 991 )
分类：前端

Vue组件页做定时刷新功能

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看