ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-count-down/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-count-down/index.vue"],"sourcesContent":["<template>\r\n  <span>\r\n    <slot :countDown=\"countDownData\">{{ countDownData }}</slot>\r\n  </span>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  reactive,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  computed,\r\n  watch,\r\n} from 'vue';\r\nimport { oneOf } from '../../utils/assist';\r\nimport { throwError } from '../../utils/error';\r\n\r\nimport { Props, Data } from './types/count-down';\r\n\r\nconst prefixCls = 'ivue-count-down';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['on-end'],\r\n  props: {\r\n    /**\r\n     * 自定义显示格式\r\n     *\r\n     * @type {Function}\r\n     */\r\n    format: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 目标时间\r\n     *\r\n     * @type {Date, Number}\r\n     */\r\n    target: {\r\n      type: [Date, Number],\r\n    },\r\n    /**\r\n     * 自动倒计时间隔\r\n     *\r\n     * @type {Number}\r\n     */\r\n    interval: {\r\n      type: Number,\r\n      default: 1000,\r\n    },\r\n    /**\r\n     * 计算类型\r\n     *\r\n     * @type {String}\r\n     */\r\n    type: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['date', 'number']);\r\n      },\r\n      default: 'date',\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 结束时间\r\n       *\r\n       * @type {Number}\r\n       */\r\n      lastTime: 0,\r\n      /**\r\n       * 倒计时函数\r\n       *\r\n       * @type {Function}\r\n       */\r\n      countDownTimer: null,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 倒计时数据\r\n    const countDownData = computed(() => {\r\n      const { format = defaultFormat } = props;\r\n\r\n      return format(data.lastTime);\r\n    });\r\n\r\n    // methods\r\n\r\n    // 初始化时间\r\n    const initTime = () => {\r\n      let lastTime = 0;\r\n      let targetTime = 0;\r\n\r\n      try {\r\n        // 目标时间 传入的是 new Date\r\n        if (Object.prototype.toString.call(props.target) === '[object Date]') {\r\n          targetTime = props.target.getTime();\r\n        }\r\n        // 按日期倒计时\r\n        else if (props.type === 'date') {\r\n          targetTime = new Date(props.target).getTime();\r\n        }\r\n      } catch (e) {\r\n        throwError(prefixCls, `invalid target prop ${e}`);\r\n      }\r\n\r\n      // 按日期倒计时\r\n      if (props.type === 'date') {\r\n        lastTime = targetTime - new Date().getTime();\r\n      }\r\n\r\n      // 按数字倒计时\r\n      if (props.type === 'number') {\r\n        lastTime = props.target;\r\n      }\r\n\r\n      return lastTime < 0 ? 0 : lastTime;\r\n    };\r\n\r\n    // 补零\r\n    const initZero = (val: number) => {\r\n      return val * 1 < 10 ? `0${val}` : val;\r\n    };\r\n\r\n    // 倒计时\r\n    const countDown = () => {\r\n      data.countDownTimer = setTimeout(() => {\r\n        // 结束时间 < 自动倒计时间隔\r\n        if (data.lastTime < props.interval) {\r\n          clearTimeout(data.countDownTimer);\r\n\r\n          data.lastTime = 0;\r\n          // 结束\r\n          emit('on-end');\r\n        }\r\n        // 倒计时中\r\n        else {\r\n          data.lastTime -= props.interval;\r\n\r\n          countDown();\r\n        }\r\n      }, props.interval);\r\n    };\r\n\r\n    // 默认显示格式\r\n    const defaultFormat = (time: number) => {\r\n      const hours = 60 * 60 * 1000;\r\n      const minutes = 60 * 1000;\r\n\r\n      const h = Math.floor(time / hours);\r\n      const m = Math.floor((time - h * hours) / minutes);\r\n      const s = Math.floor((time - h * hours - m * minutes) / 1000);\r\n\r\n      return `${initZero(h)}:${initZero(m)}:${initZero(s)}`;\r\n    };\r\n\r\n    // watch\r\n\r\n    // 监听目标时间变化\r\n    watch(\r\n      () => props.target,\r\n      () => {\r\n        // 倒计时函数\r\n        if (data.countDownTimer) {\r\n          clearTimeout(data.countDownTimer);\r\n        }\r\n\r\n        // 重新设置结束时间\r\n        data.lastTime = initTime();\r\n\r\n        // 倒计时\r\n        countDown();\r\n      }\r\n    );\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 设置结束时间\r\n      data.lastTime = initTime();\r\n\r\n      countDown();\r\n    });\r\n\r\n    // onBeforeUnmount\r\n    onBeforeUnmount(() => {\r\n      // 倒计时函数\r\n      if (data.countDownTimer) {\r\n        clearTimeout(data.countDownTimer);\r\n      }\r\n    });\r\n\r\n    return {\r\n      // computed\r\n      countDownData,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_renderSlot"],"mappings":";;;;SAEI,YAA2D,IAAA,EAAA,MAAA,EAAA,MAApD,EAAA,MAAA,EAAS,OAAE,QAAA,EAAA;wCAAkB,CAAA,MAAA,EAAa,IAAA,EAAA;AAAA,IAAAA,UAAA,CAAA,KAAA,MAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA,IAAA,CAAA,aAAA,EAAA,EAAA,MAAA;AAAA;;;;;;;;"}