SwipeItem.mjs 2.2 KB

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