CountDown.mjs 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import { createVNode as _createVNode } from "vue";
  2. import { watch, computed, defineComponent } from "vue";
  3. import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
  4. import { parseFormat } from "./utils.mjs";
  5. import { useCountDown } from "@vant/use";
  6. import { useExpose } from "../composables/use-expose.mjs";
  7. const [name, bem] = createNamespace("count-down");
  8. const countDownProps = {
  9. time: makeNumericProp(0),
  10. format: makeStringProp("HH:mm:ss"),
  11. autoStart: truthProp,
  12. millisecond: Boolean
  13. };
  14. var stdin_default = defineComponent({
  15. name,
  16. props: countDownProps,
  17. emits: ["change", "finish"],
  18. setup(props, {
  19. emit,
  20. slots
  21. }) {
  22. const {
  23. start,
  24. pause,
  25. reset,
  26. current
  27. } = useCountDown({
  28. time: +props.time,
  29. millisecond: props.millisecond,
  30. onChange: (current2) => emit("change", current2),
  31. onFinish: () => emit("finish")
  32. });
  33. const timeText = computed(() => parseFormat(props.format, current.value));
  34. const resetTime = () => {
  35. reset(+props.time);
  36. if (props.autoStart) {
  37. start();
  38. }
  39. };
  40. watch(() => props.time, resetTime, {
  41. immediate: true
  42. });
  43. useExpose({
  44. start,
  45. pause,
  46. reset: resetTime
  47. });
  48. return () => _createVNode("div", {
  49. "role": "timer",
  50. "class": bem()
  51. }, [slots.default ? slots.default(current.value) : timeText.value]);
  52. }
  53. });
  54. export {
  55. stdin_default as default
  56. };