RollingText.mjs 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { ref, defineComponent, computed, watch, createVNode as _createVNode } from "vue";
  2. import { raf } from "@vant/use";
  3. import { createNamespace, makeArrayProp, makeNumberProp, makeStringProp, truthProp, padZero } from "../utils/index.mjs";
  4. import { useExpose } from "../composables/use-expose.mjs";
  5. import RollingTextItem from "./RollingTextItem.mjs";
  6. const [name, bem] = createNamespace("rolling-text");
  7. const rollingTextProps = {
  8. startNum: makeNumberProp(0),
  9. targetNum: Number,
  10. textList: makeArrayProp(),
  11. duration: makeNumberProp(2),
  12. autoStart: truthProp,
  13. direction: makeStringProp("down"),
  14. stopOrder: makeStringProp("ltr"),
  15. height: makeNumberProp(40)
  16. };
  17. const CIRCLE_NUM = 2;
  18. var stdin_default = defineComponent({
  19. name,
  20. props: rollingTextProps,
  21. setup(props) {
  22. const isCustomType = computed(() => Array.isArray(props.textList) && props.textList.length);
  23. const itemLength = computed(() => {
  24. if (isCustomType.value) return props.textList[0].length;
  25. return `${Math.max(props.startNum, props.targetNum)}`.length;
  26. });
  27. const getTextArrByIdx = (idx) => {
  28. const result = [];
  29. for (let i = 0; i < props.textList.length; i++) {
  30. result.push(props.textList[i][idx]);
  31. }
  32. return result;
  33. };
  34. const targetNumArr = computed(() => {
  35. if (isCustomType.value) return new Array(itemLength.value).fill("");
  36. return padZero(props.targetNum, itemLength.value).split("");
  37. });
  38. const startNumArr = computed(() => padZero(props.startNum, itemLength.value).split(""));
  39. const getFigureArr = (i) => {
  40. const start2 = +startNumArr.value[i];
  41. const target = +targetNumArr.value[i];
  42. const result = [];
  43. for (let i2 = start2; i2 <= 9; i2++) {
  44. result.push(i2);
  45. }
  46. for (let i2 = 0; i2 <= CIRCLE_NUM; i2++) {
  47. for (let j = 0; j <= 9; j++) {
  48. result.push(j);
  49. }
  50. }
  51. for (let i2 = 0; i2 <= target; i2++) {
  52. result.push(i2);
  53. }
  54. return result;
  55. };
  56. const getDelay = (i, len) => {
  57. if (props.stopOrder === "ltr") return 0.2 * i;
  58. return 0.2 * (len - 1 - i);
  59. };
  60. const rolling = ref(props.autoStart);
  61. const start = () => {
  62. rolling.value = true;
  63. };
  64. const reset = () => {
  65. rolling.value = false;
  66. if (props.autoStart) {
  67. raf(() => start());
  68. }
  69. };
  70. watch(() => props.autoStart, (value) => {
  71. if (value) {
  72. start();
  73. }
  74. });
  75. useExpose({
  76. start,
  77. reset
  78. });
  79. return () => _createVNode("div", {
  80. "class": bem()
  81. }, [targetNumArr.value.map((_, i) => _createVNode(RollingTextItem, {
  82. "figureArr": isCustomType.value ? getTextArrByIdx(i) : getFigureArr(i),
  83. "duration": props.duration,
  84. "direction": props.direction,
  85. "isStart": rolling.value,
  86. "height": props.height,
  87. "delay": getDelay(i, itemLength.value)
  88. }, null))]);
  89. }
  90. });
  91. export {
  92. stdin_default as default,
  93. rollingTextProps
  94. };