458316f9415fe381d77c009c4b21761a08f0635e55c685d4a943903a813433a37cbf7cf63b8bf261747a655d0c903b885b680a802d76ba2503631f5f55d40b 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, openBlock, createBlock, unref, createSlots, renderList, withCtx, renderSlot } from 'vue';
  2. import { ElStatistic } from '../../statistic/index.mjs';
  3. import { countdownProps, countdownEmits } from './countdown.mjs';
  4. import { formatTime, getTime } from './utils.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { rAF, cAF } from '../../../utils/raf.mjs';
  7. import { CHANGE_EVENT } from '../../../constants/event.mjs';
  8. const __default__ = defineComponent({
  9. name: "ElCountdown"
  10. });
  11. const _sfc_main = /* @__PURE__ */ defineComponent({
  12. ...__default__,
  13. props: countdownProps,
  14. emits: countdownEmits,
  15. setup(__props, { expose, emit }) {
  16. const props = __props;
  17. let timer;
  18. const rawValue = ref(0);
  19. const displayValue = computed(() => formatTime(rawValue.value, props.format));
  20. const formatter = (val) => formatTime(val, props.format);
  21. const stopTimer = () => {
  22. if (timer) {
  23. cAF(timer);
  24. timer = void 0;
  25. }
  26. };
  27. const startTimer = () => {
  28. const timestamp = getTime(props.value);
  29. const frameFunc = () => {
  30. let diff = timestamp - Date.now();
  31. emit(CHANGE_EVENT, diff);
  32. if (diff <= 0) {
  33. diff = 0;
  34. stopTimer();
  35. emit("finish");
  36. } else {
  37. timer = rAF(frameFunc);
  38. }
  39. rawValue.value = diff;
  40. };
  41. timer = rAF(frameFunc);
  42. };
  43. onMounted(() => {
  44. rawValue.value = getTime(props.value) - Date.now();
  45. watch(() => [props.value, props.format], () => {
  46. stopTimer();
  47. startTimer();
  48. }, {
  49. immediate: true
  50. });
  51. });
  52. onBeforeUnmount(() => {
  53. stopTimer();
  54. });
  55. expose({
  56. displayValue
  57. });
  58. return (_ctx, _cache) => {
  59. return openBlock(), createBlock(unref(ElStatistic), {
  60. value: rawValue.value,
  61. title: _ctx.title,
  62. prefix: _ctx.prefix,
  63. suffix: _ctx.suffix,
  64. "value-style": _ctx.valueStyle,
  65. formatter
  66. }, createSlots({
  67. _: 2
  68. }, [
  69. renderList(_ctx.$slots, (_, name) => {
  70. return {
  71. name,
  72. fn: withCtx(() => [
  73. renderSlot(_ctx.$slots, name)
  74. ])
  75. };
  76. })
  77. ]), 1032, ["value", "title", "prefix", "suffix", "value-style"]);
  78. };
  79. }
  80. });
  81. var Countdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "countdown.vue"]]);
  82. export { Countdown as default };
  83. //# sourceMappingURL=countdown2.mjs.map