element-plus
Version:
A Component Library for Vue 3
1 lines • 3.91 kB
Source Map (JSON)
{"version":3,"file":"countdown.vue2.mjs","sources":["../../../../../../packages/components/countdown/src/countdown.vue"],"sourcesContent":["<template>\n <el-statistic\n :value=\"rawValue\"\n :title=\"title\"\n :prefix=\"prefix\"\n :suffix=\"suffix\"\n :value-style=\"valueStyle\"\n :formatter=\"formatter\"\n >\n <template v-for=\"(_, name) in $slots\" #[name]>\n <slot :name=\"name\" />\n </template>\n </el-statistic>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { ElStatistic } from '@element-plus/components/statistic'\nimport { cAF, rAF } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { countdownEmits } from './countdown'\nimport { formatTime, getTime } from './utils'\n\nimport type { CountdownProps } from './countdown'\n\ndefineOptions({\n name: 'ElCountdown',\n})\nconst props = withDefaults(defineProps<CountdownProps>(), {\n format: 'HH:mm:ss',\n value: 0,\n valueStyle: undefined,\n})\nconst emit = defineEmits(countdownEmits)\n\nlet timer: ReturnType<typeof rAF> | undefined\nconst rawValue = ref<number>(0)\nconst displayValue = computed(() => formatTime(rawValue.value, props.format))\n\nconst formatter = (val: number) => formatTime(val, props.format)\n\nconst stopTimer = () => {\n if (timer) {\n cAF(timer)\n timer = undefined\n }\n}\n\nconst startTimer = () => {\n const timestamp = getTime(props.value)\n const frameFunc = () => {\n let diff = timestamp - Date.now()\n emit(CHANGE_EVENT, diff)\n if (diff <= 0) {\n diff = 0\n stopTimer()\n emit('finish')\n } else {\n timer = rAF(frameFunc)\n }\n rawValue.value = diff\n }\n timer = rAF(frameFunc)\n}\n\nonMounted(() => {\n rawValue.value = getTime(props.value) - Date.now()\n\n watch(\n () => [props.value, props.format],\n () => {\n stopTimer()\n startTimer()\n },\n {\n immediate: true,\n }\n )\n})\n\nonBeforeUnmount(() => {\n stopTimer()\n})\n\ndefineExpose({\n /**\n * @description current display value\n */\n displayValue,\n})\n</script>\n"],"names":["_createBlock","_unref","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AA4BA,IAAA,MAAM,KAAA,GAAQ,OAAA;AAKd,IAAA,MAAM,IAAA,GAAO,MAAA;AAEb,IAAA,IAAI,KAAA;AACJ,IAAA,MAAM,QAAA,GAAW,IAAY,CAAC,CAAA;AAC9B,IAAA,MAAM,YAAA,GAAe,SAAS,MAAM,UAAA,CAAW,SAAS,KAAA,EAAO,KAAA,CAAM,MAAM,CAAC,CAAA;AAE5E,IAAA,MAAM,YAAY,CAAC,GAAA,KAAgB,UAAA,CAAW,GAAA,EAAK,MAAM,MAAM,CAAA;AAE/D,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,GAAA,CAAI,KAAK,CAAA;AACT,QAAA,KAAA,GAAQ,MAAA;AAAA,MACV;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAA,MAAM,SAAA,GAAY,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA;AACrC,MAAA,MAAM,YAAY,MAAM;AACtB,QAAA,IAAI,IAAA,GAAO,SAAA,GAAY,IAAA,CAAK,GAAA,EAAI;AAChC,QAAA,IAAA,CAAK,cAAc,IAAI,CAAA;AACvB,QAAA,IAAI,QAAQ,CAAA,EAAG;AACb,UAAA,IAAA,GAAO,CAAA;AACP,UAAA,SAAA,EAAU;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,QACf,CAAA,MAAO;AACL,UAAA,KAAA,GAAQ,IAAI,SAAS,CAAA;AAAA,QACvB;AACA,QAAA,QAAA,CAAS,KAAA,GAAQ,IAAA;AAAA,MACnB,CAAA;AACA,MAAA,KAAA,GAAQ,IAAI,SAAS,CAAA;AAAA,IACvB,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,QAAQ,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA,GAAI,KAAK,GAAA,EAAI;AAEjD,MAAA,KAAA;AAAA,QACE,MAAM,CAAC,KAAA,CAAM,KAAA,EAAO,MAAM,MAAM,CAAA;AAAA,QAChC,MAAM;AACJ,UAAA,SAAA,EAAU;AACV,UAAA,UAAA,EAAW;AAAA,QACb,CAAA;AAAA,QACA;AAAA,UACE,SAAA,EAAW;AAAA;AACb,OACF;AAAA,IACF,CAAC,CAAA;AAED,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAA,SAAA,EAAU;AAAA,IACZ,CAAC,CAAA;AAED,IAAA,QAAA,CAAa;AAAA;AAAA;AAAA;AAAA,MAIX;AAAA,KACD,CAAA;;0BAxFCA,WAAA,CAWeC,KAAA,CAAA,WAAA,CAAA,EAAA;AAAA,QAVZ,OAAO,QAAA,CAAA,KAAA;AAAA,QACP,OAAO,OAAA,CAAA,KAAA;AAAA,QACP,QAAQ,OAAA,CAAA,MAAA;AAAA,QACR,QAAQ,OAAA,CAAA,MAAA;AAAA,QACR,eAAa,OAAA,CAAA,UAAA;AAAA,QACb;AAAA;;;;mBAE6BC,IAAAA,CAAAA,MAAAA,EAAM,CAAlB,GAAG,IAAA,KAAI;;;wBACvB,MAAqB;AAAA,cAArBC,UAAA,CAAqB,IAAA,SAAR,IAAI;AAAA;;;;;;;;;;"}