vivo-ui/lib/components/timer/index.js

vivo ui component lib for vue

import transition from '../../tools/transition/index';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = "";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = { render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('span', [_vm._v(_vm._s(_vm.value))]);
  }, staticRenderFns: [],
  name: 'timer',
  inheritAttrs: false,
  props: {
    from: { // 大于0就倒计时，否则正计时
      type: Number,
      default: 0
    },
    pause: { // 是否暂停
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      value: 0
    };
  },

  watch: {
    from: {
      handler: 'init',
      immediate: true
    },
    pause: function pause() {
      this.pause ? this.timer.pause() : this.timer.play();
    }
  },
  methods: {
    init: function init() {
      var _this = this;

      var to = this.from > 0 ? 0 : 100 * 365 * 24 * 3600; // 正计时最大一百年

      this.value = this.getInteger(this.from);
      this.timer && this.timer.pause();
      this.timer = transition(this.from, to, function (value, complete) {
        value = _this.getInteger(value);
        if (value !== _this.value || complete) {
          _this.value = value;
          _this.$emit('change', value, complete);
        }
      }, Math.abs(to - this.from) * 1000);
      this.pause ? this.timer.pause() : this.timer.play();
    },
    getInteger: function getInteger(value) {
      return this.from > 0 ? window.Math.ceil(value) : window.Math.floor(value);
    }
  }
};

export default index;