feat(vue): add boolean lazy prop to SwiperSlide to render lazy prel…

…aoder
nolimits4web · Nov 10, 2022 · e36b580 · e36b580
1 parent ddad088
commit e36b580
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/vue/swiper-slide.js b/src/vue/swiper-slide.js
@@ -19,6 +19,7 @@ const SwiperSlide = {
     },
     swiperRef: { type: Object, required: false },
     zoom: { type: Boolean, default: undefined },
+    lazy: { type: Boolean, default: false },
     virtualIndex: {
       type: [String, Number],
       default: undefined,
@@ -29,6 +30,7 @@ const SwiperSlide = {
     const { swiperRef } = props;
     const slideElRef = ref(null);
     const slideClasses = ref('swiper-slide');
+    const lazyLoaded = ref(false);
 
     function updateClasses(swiper, el, classNames) {
       if (el === slideElRef.value) {
@@ -76,13 +78,19 @@ const SwiperSlide = {
         slideClasses.value.indexOf('swiper-slide-duplicate-next') >= 0,
     }));
     provide('swiperSlide', slideData);
+
+    const onLoad = () => {
+      lazyLoaded.value = true;
+    };
+
     return () => {
       return h(
         props.tag,
         {
           class: uniqueClasses(`${slideClasses.value}`),
           ref: slideElRef,
           'data-swiper-slide-index': props.virtualIndex,
+          onLoadCapture: onLoad,
         },
         props.zoom
           ? h(
@@ -91,9 +99,15 @@ const SwiperSlide = {
                 class: 'swiper-zoom-container',
                 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined,
               },
-              slots.default && slots.default(slideData.value),
+              [
+                slots.default && slots.default(slideData.value),
+                props.lazy && !lazyLoaded.value && h('div', { class: 'swiper-lazy-preloader' }),
+              ],
             )
-          : slots.default && slots.default(slideData.value),
+          : [
+              slots.default && slots.default(slideData.value),
+              props.lazy && !lazyLoaded.value && h('div', { class: 'swiper-lazy-preloader' }),
+            ],
       );
     };
   },

diff --git a/src/vue/swiper-vue.d.ts b/src/vue/swiper-vue.d.ts
@@ -464,6 +464,7 @@ declare const SwiperSlide: DefineComponent<{
     default: string;
   };
   swiperRef: { type: PropType<SwiperClass>; required: false };
+  lazy: { type: BooleanConstructor; default: false };
   zoom: { type: BooleanConstructor; default: undefined };
   virtualIndex: {
     type: StringConstructor | NumberConstructor;