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: Object,
|
11 | zoom: {
|
12 | type: Boolean,
|
13 | default: undefined
|
14 | },
|
15 | virtualIndex: {
|
16 | type: [String, Number],
|
17 | default: undefined
|
18 | }
|
19 | },
|
20 |
|
21 | setup(props, {
|
22 | slots
|
23 | }) {
|
24 | let eventAttached = false;
|
25 | const {
|
26 | swiperRef
|
27 | } = props;
|
28 | const slideElRef = ref(null);
|
29 | const slideClasses = ref('swiper-slide');
|
30 |
|
31 | function updateClasses(swiper, el, classNames) {
|
32 | if (el === slideElRef.value) {
|
33 | slideClasses.value = classNames;
|
34 | }
|
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 |
|
50 | if (swiperRef.value.destroyed) {
|
51 | if (slideClasses.value !== 'swiper-slide') {
|
52 | slideClasses.value = 'swiper-slide';
|
53 | }
|
54 | }
|
55 | });
|
56 | onBeforeUnmount(() => {
|
57 | if (!swiperRef || !swiperRef.value) return;
|
58 | swiperRef.value.off('_slideClass', updateClasses);
|
59 | });
|
60 | const slideData = computed(() => ({
|
61 | isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-active') >= 0,
|
62 | isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
|
63 | isDuplicate: slideClasses.value.indexOf('swiper-slide-duplicate') >= 0,
|
64 | isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-prev') >= 0,
|
65 | isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0 || slideClasses.value.indexOf('swiper-slide-duplicate-next') >= 0
|
66 | }));
|
67 | return () => {
|
68 | return h(props.tag, {
|
69 | class: uniqueClasses(`${slideClasses.value}`),
|
70 | ref: slideElRef,
|
71 | 'data-swiper-slide-index': props.virtualIndex
|
72 | }, props.zoom ? h('div', {
|
73 | class: 'swiper-zoom-container',
|
74 | 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
|
75 | }, slots.default && slots.default(slideData.value)) : slots.default && slots.default(slideData.value));
|
76 | };
|
77 | }
|
78 |
|
79 | };
|
80 | export { SwiperSlide }; |
\ | No newline at end of file |