vue 定时刷新按钮控制

直接上干货

公共组件

<template><el-switchref="switchObj"v-bind="$attrs":width="width":active-color="activeColor":inactive-color="inactiveColor"v-on="$listeners"/>
</template>
<script>
export default {name: 'BaseSwitch',props: {width: {type: Number,default: 42},activeColor: {type: String,default: '#13CE66'},inactiveColor: {type: String,default: '#F2F2F2'}},methods: {focus () {this.$refs.switchObj.focus();}}
};
</script>

中英文里面的

  mainPortal: {autoQuery: '自动刷新',hasAutoQuery: '正在刷新，请稍后',autoQueryTips: '{second}秒后自动刷新'},mainPortal: {autoQuery: 'Auto Refreshing',hasAutoQuery: 'Refreshing... Please wait.',autoQueryTips: 'Auto refreshing after {second}s'},

需要在那个页面那种引入就直接复制过去

<template><div style="padding: 0px 20px;"><div class="work-order-list-header"><div class="header-right"><base-switchv-model="autoQuery":inactive-text="autoQuery ?(autoQuerySecond > 0 ? $t('mainPortal.autoQueryTips',{second:autoQuerySecond}):$t('mainPortal.hasAutoQuery')):$t('mainPortal.autoQuery')"></base-switch></div></div></div>
</template>
<script>
import BaseSwitch from '@/components/base/switch/switch';
const refreshSecond = 60;//设置刷新周期时间
export default {components: {BaseSwitch},data () {return {autoQuery: false,autoQuerySecond: refreshSecond,intervalId: null // 定时器};},watch: {autoQuery (val) {if (val) {this.setInterval();} else {this.clearInterval();}}},mounted () {},beforeDestroy () {this.clearInterval();},created () {},methods: {// 定时器setInterval () {if (this.intervalId !== null) {return;}// 1分钟刷一次this.intervalId = setInterval(() => {this.autoQuerySecond--;if (this.autoQuerySecond === 0) {// 刷新数据 此处调用要刷新的方法this.todoListSearch();}}, 1000);},// 停止定时器clearInterval () {clearInterval(this.intervalId); // 清除计时器this.intervalId = null; // 设置为nullthis.autoQuerySecond = refreshSecond;}}
};
</script>
<style></style>;

vue 定时刷新按钮控制相关推荐

Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout.setInterval定时执行,另一种是websocket消息推送.我的需求是,当数据库中的数据发生更新时,前端就 ...
vue 定时刷新单页面_vue定时器，刷新页面继续计时
子组件 :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal&quo ...
vue页面的定时刷新
在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况,那么这个时候我们就要使用setInterval()了.那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢?这就需 ...
VUE定时器（页面定时刷新）
VUE定时器(页面定时刷新) 如果觉得页面上数据刷新缓慢,我们就可以使用vue中的定时器设置时间,五分钟.十分钟刷新一次都行. 一. //创建实例,可以取值,但是拿不到值 created(){} 二. ...
Vue 前端页面按钮权限控制
前言按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能,但是没有凸显出来,所以现在单独写一篇文章用来记录一下一.什么是按钮权限控制? 刚刚做完了一个后台管理系统,有用到按钮权限控制, ...
ESP8266利用Bliker、小爱同学和本地按钮控制4路开关
ESP8266利用Bliker.小爱同学和本地按钮控制4路开关 Blinker函数说明: Button.color("#FFFF00"); //设置app按键是纯黄色,16进制颜色 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
如何用 Vue 实现前端权限控制
本文来自作者雅X共赏在 GitChat 上分享「如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比为什么做前端 ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...

vue 定时刷新按钮控制

vue 定时刷新按钮控制

vue 定时刷新按钮控制相关推荐

最新文章

热门文章