swiper-slide.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { h, ref, onMounted, onUpdated, onBeforeUpdate, computed, onBeforeUnmount } from 'vue';
  2. import { uniqueClasses } from './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. zoom: {
  15. type: Boolean,
  16. default: undefined
  17. },
  18. virtualIndex: {
  19. type: [String, Number],
  20. default: undefined
  21. }
  22. },
  23. setup(props, {
  24. slots
  25. }) {
  26. let eventAttached = false;
  27. const {
  28. swiperRef
  29. } = props;
  30. const slideElRef = ref(null);
  31. const slideClasses = ref('swiper-slide');
  32. function updateClasses(swiper, el, classNames) {
  33. if (el === slideElRef.value) {
  34. slideClasses.value = classNames;
  35. }
  36. }
  37. onMounted(() => {
  38. if (!swiperRef.value) return;
  39. swiperRef.value.on('_slideClass', updateClasses);
  40. eventAttached = true;
  41. });
  42. onBeforeUpdate(() => {
  43. if (eventAttached || !swiperRef || !swiperRef.value) return;
  44. swiperRef.value.on('_slideClass', updateClasses);
  45. eventAttached = true;
  46. });
  47. onUpdated(() => {
  48. if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
  49. if (swiperRef.value.destroyed) {
  50. if (slideClasses.value !== 'swiper-slide') {
  51. slideClasses.value = 'swiper-slide';
  52. }
  53. }
  54. });
  55. onBeforeUnmount(() => {
  56. if (!swiperRef || !swiperRef.value) return;
  57. swiperRef.value.off('_slideClass', updateClasses);
  58. });
  59. const slideData = computed(() => ({
  60. isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-active') >= 0,
  61. isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
  62. isDuplicate: slideClasses.value.indexOf('swiper-slide-duplicate') >= 0,
  63. isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-prev') >= 0,
  64. isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-next') >= 0
  65. }));
  66. return () => {
  67. return h(props.tag, {
  68. class: uniqueClasses(`${slideClasses.value}`),
  69. ref: slideElRef,
  70. 'data-swiper-slide-index': props.virtualIndex
  71. }, props.zoom ? h('div', {
  72. class: 'swiper-zoom-container',
  73. 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
  74. }, slots.default && slots.default(slideData.value)) : slots.default && slots.default(slideData.value));
  75. };
  76. }
  77. };
  78. export { SwiperSlide };