RollingTextItem.mjs 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import { defineComponent, computed, createVNode as _createVNode } from "vue";
  2. import { createNamespace, makeNumberProp, makeArrayProp, makeStringProp, addUnit } from "../utils/index.mjs";
  3. const props = {
  4. figureArr: makeArrayProp(),
  5. delay: Number,
  6. duration: makeNumberProp(2),
  7. isStart: Boolean,
  8. direction: makeStringProp("down"),
  9. height: makeNumberProp(40)
  10. };
  11. const [name, bem] = createNamespace("rolling-text-item");
  12. var stdin_default = defineComponent({
  13. name,
  14. props,
  15. setup(props2) {
  16. const newFigureArr = computed(() => props2.direction === "down" ? props2.figureArr.slice().reverse() : props2.figureArr);
  17. const translatePx = computed(() => {
  18. const totalHeight = props2.height * (props2.figureArr.length - 1);
  19. return `-${totalHeight}px`;
  20. });
  21. const itemStyle = computed(() => ({
  22. lineHeight: addUnit(props2.height)
  23. }));
  24. const rootStyle = computed(() => ({
  25. height: addUnit(props2.height),
  26. "--van-translate": translatePx.value,
  27. "--van-duration": props2.duration + "s",
  28. "--van-delay": props2.delay + "s"
  29. }));
  30. return () => _createVNode("div", {
  31. "class": bem([props2.direction]),
  32. "style": rootStyle.value
  33. }, [_createVNode("div", {
  34. "class": bem("box", {
  35. animate: props2.isStart
  36. })
  37. }, [Array.isArray(newFigureArr.value) && newFigureArr.value.map((figure) => _createVNode("div", {
  38. "class": bem("item"),
  39. "style": itemStyle.value
  40. }, [figure]))])]);
  41. }
  42. });
  43. export {
  44. stdin_default as default,
  45. props
  46. };