CountDown.mjs 1.4 KB

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