shu-c-view/packages/count-down/index.js

rollup 打包vue@2.7组件库框架

import CountDown from 'vant/lib/count-down';
// import 'vant/lib/count-down/style';
import _set from 'lodash/set';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
import _now from 'lodash/now';
import { devConsole } from '../helper/util.js';
// 秒-倒计时组件
const BaseCountDown = {
  name: 'BaseCountDown',
  props: {
    // 60秒倒计时
    time: {
      type: Number,
      default: 60
    },
    // 一个可选添加的CSS样式类，加入到组件的容器上
    extraCls: {
      type: String
    },
    // 是否要循环计时-上一轮计时结束自动开始下一次
    isAlways: {
      type: Boolean,
      default: false
    },
    // 是否自动开始倒计时
    autoStart: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    autoStart(val) {
      if (val) {
        this.start();
      }
    }
  },
  data() {
    return {
      timeKey: `count-down-${_now()}`
    };
  },
  methods: {
    // 开始
    start() {
      this.$refs.countDownRef.start(); // 需要先暂停才能开始
    },
    // 暂停
    pause() {
      this.$refs.countDownRef.pause();
    },
    // 重置
    reset() {
      this.$refs.countDownRef.reset(); // 如果是循环计时则会将秒数重置回初始数值
    }
  },
  render(h) {
    const oClassObj = { 'base-count-down': true };
    if (this.extraCls) {
      _set(oClassObj, this.extraCls, true);
    }
    return h(
      CountDown,
      {
        class: oClassObj,
        props: {
          format: 'ss',
          time: this.time * 1000,
          millisecond: false,
          autoStart: this.autoStart
        },
        ref: 'countDownRef',
        on: {
          finish: () => {
            if (this.isAlways) {
              this.timeKey = `count-down-${_now()}`;
            }
            this.$emit('finish'); // 倒计时结束时触发
          },
          change: time => {
            const { seconds, milliseconds } = time;
            if (seconds === 0 && milliseconds !== 0) {
              // 防止 seconds=0 但是 milliseconds 毫秒 还没有到0 导致 等于 0 时 change 的$emit事件会触发两次
              return;
            }
            this.$emit('change', time.seconds); // 倒计时变化时触发
          }
        },
        key: this.timeKey
      },
      []
    );
  }
};
BaseCountDown.install = function(Vue, ElComponents) {
  // 用于按需加载的时候独立使用
  devConsole(`按需加载独立组件：${BaseCountDown.name}`);
  if (_isArray(ElComponents) && !_isEmpty(ElComponents)) {
    for (let i = 0; i < ElComponents.length; i += 1) {
      if (ElComponents[i].name !== BaseCountDown.name) {
        Vue.use(ElComponents[i]);
      }
    }
  }
  Vue.component(BaseCountDown.name, BaseCountDown);
};
export { BaseCountDown };