swiper-slide.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import { h, ref, onMounted, onUpdated, onBeforeUpdate, computed, onBeforeUnmount, provide } from 'vue';
  2. import { uniqueClasses } from '../components-shared/utils.js';
  3. const SwiperSlide = {
  4. name: 'SwiperSlide',
  5. props: {
  6. tag: {
  7. type: String,
  8. default: 'div'
  9. },
  10. swiperRef: {
  11. type: Object,
  12. required: false
  13. },
  14. swiperSlideIndex: {
  15. type: Number,
  16. default: undefined,
  17. required: false
  18. },
  19. zoom: {
  20. type: Boolean,
  21. default: undefined,
  22. required: false
  23. },
  24. lazy: {
  25. type: Boolean,
  26. default: false,
  27. required: false
  28. },
  29. virtualIndex: {
  30. type: [String, Number],
  31. default: undefined
  32. }
  33. },
  34. setup(props, _ref) {
  35. let {
  36. slots
  37. } = _ref;
  38. let eventAttached = false;
  39. const {
  40. swiperRef
  41. } = props;
  42. const slideElRef = ref(null);
  43. const slideClasses = ref('swiper-slide');
  44. const lazyLoaded = ref(false);
  45. function updateClasses(swiper, el, classNames) {
  46. if (el === slideElRef.value) {
  47. slideClasses.value = classNames;
  48. }
  49. }
  50. onMounted(() => {
  51. if (!swiperRef || !swiperRef.value) return;
  52. swiperRef.value.on('_slideClass', updateClasses);
  53. eventAttached = true;
  54. });
  55. onBeforeUpdate(() => {
  56. if (eventAttached || !swiperRef || !swiperRef.value) return;
  57. swiperRef.value.on('_slideClass', updateClasses);
  58. eventAttached = true;
  59. });
  60. onUpdated(() => {
  61. if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
  62. if (typeof props.swiperSlideIndex !== 'undefined') {
  63. slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
  64. }
  65. if (swiperRef.value.destroyed) {
  66. if (slideClasses.value !== 'swiper-slide') {
  67. slideClasses.value = 'swiper-slide';
  68. }
  69. }
  70. });
  71. onBeforeUnmount(() => {
  72. if (!swiperRef || !swiperRef.value) return;
  73. swiperRef.value.off('_slideClass', updateClasses);
  74. });
  75. const slideData = computed(() => ({
  76. isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
  77. isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
  78. isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
  79. isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
  80. }));
  81. provide('swiperSlide', slideData);
  82. const onLoad = () => {
  83. lazyLoaded.value = true;
  84. };
  85. return () => {
  86. return h(props.tag, {
  87. class: uniqueClasses(`${slideClasses.value}`),
  88. ref: slideElRef,
  89. 'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
  90. onLoadCapture: onLoad
  91. }, props.zoom ? h('div', {
  92. class: 'swiper-zoom-container',
  93. 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
  94. }, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  95. class: 'swiper-lazy-preloader'
  96. })]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  97. class: 'swiper-lazy-preloader'
  98. })]);
  99. };
  100. }
  101. };
  102. export { SwiperSlide };