SwipeItem.mjs 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import { computed, nextTick, reactive, onMounted, defineComponent, createVNode as _createVNode } from "vue";
  2. import { createNamespace } from "../utils/index.mjs";
  3. import { SWIPE_KEY } from "../swipe/Swipe.mjs";
  4. import { useParent } from "@vant/use";
  5. import { useExpose } from "../composables/use-expose.mjs";
  6. const [name, bem] = createNamespace("swipe-item");
  7. var stdin_default = defineComponent({
  8. name,
  9. setup(props, {
  10. slots
  11. }) {
  12. let rendered;
  13. const state = reactive({
  14. offset: 0,
  15. inited: false,
  16. mounted: false
  17. });
  18. const {
  19. parent,
  20. index
  21. } = useParent(SWIPE_KEY);
  22. if (!parent) {
  23. if (process.env.NODE_ENV !== "production") {
  24. console.error("[Vant] <SwipeItem> must be a child component of <Swipe>.");
  25. }
  26. return;
  27. }
  28. const style = computed(() => {
  29. const style2 = {};
  30. const {
  31. vertical
  32. } = parent.props;
  33. if (parent.size.value) {
  34. style2[vertical ? "height" : "width"] = `${parent.size.value}px`;
  35. }
  36. if (state.offset) {
  37. style2.transform = `translate${vertical ? "Y" : "X"}(${state.offset}px)`;
  38. }
  39. return style2;
  40. });
  41. const shouldRender = computed(() => {
  42. const {
  43. loop,
  44. lazyRender
  45. } = parent.props;
  46. if (!lazyRender || rendered) {
  47. return true;
  48. }
  49. if (!state.mounted) {
  50. return false;
  51. }
  52. const active = parent.activeIndicator.value;
  53. const maxActive = parent.count.value - 1;
  54. const prevActive = active === 0 && loop ? maxActive : active - 1;
  55. const nextActive = active === maxActive && loop ? 0 : active + 1;
  56. rendered = index.value === active || index.value === prevActive || index.value === nextActive;
  57. return rendered;
  58. });
  59. const setOffset = (offset) => {
  60. state.offset = offset;
  61. };
  62. onMounted(() => {
  63. nextTick(() => {
  64. state.mounted = true;
  65. });
  66. });
  67. useExpose({
  68. setOffset
  69. });
  70. return () => {
  71. var _a;
  72. return _createVNode("div", {
  73. "class": bem(),
  74. "style": style.value
  75. }, [shouldRender.value ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null]);
  76. };
  77. }
  78. });
  79. export {
  80. stdin_default as default
  81. };