vue 定时刷新按钮控制

vue 定时刷新按钮控制

直接上干货


公共组件

<template>
  <el-switch
    ref="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-switch
          v-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; // 设置为null
      this.autoQuerySecond = refreshSecond;
    }
  }
};
</script>
<style>

</style>;