Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: swiper-container :init="false" The method returned by useSwiper … #140

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: swiper-container :init="false" The method returned by useSwiper … #140

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/runtime/composables/useSwiper.client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { SwiperContainer } from 'swiper/element'
import type { Swiper } from 'swiper/types'
import type { Ref } from 'vue'
import { computed, nextTick, onMounted, watch } from 'vue'
import { nextTick, onMounted, ref, watch } from 'vue'

/**
* This is a utility function that allows you to use the Swiper instance directly.
Expand All @@ -9,7 +10,7 @@ import { computed, nextTick, onMounted, watch } from 'vue'
* @param options - Swiper options to merge with the default options if the `swiper` instance is not yet created.
*/
export function useSwiper(swiperContainerRef: Ref<SwiperContainer | null>, options?: SwiperContainer['swiper']['params']) {
const swiper = computed(() => swiperContainerRef?.value?.swiper ?? null)
const swiper = ref<Swiper>()

/**
* Run transition to next slide.
Expand Down Expand Up @@ -82,6 +83,7 @@ export function useSwiper(swiperContainerRef: Ref<SwiperContainer | null>, optio
Object.assign(swiperContainerRef.value, options)
swiperContainerRef.value?.initialize()
}
swiper.value = swiperContainerRef?.value?.swiper
Copy link

@Quineone Quineone Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It confused me，the value of 'swiperContainerRef?.value?.swiper' is reactive, but 'swiper.value' is not. You can resize the swiper and check the value of them. (eg. isLocked, isEnd, isBeginning, ...)

for now, I have to workaround by using the events:

on: {
    resize(swiper: Swiper) {
      isLocked.value = swiper.isLocked
      isEnd.value = swiper.isEnd
      isBeginning.value = swiper.isBeginning
    },
    slideChange(swiper: Swiper) {
      isEnd.value = swiper.isEnd
      isBeginning.value = swiper.isBeginning
    }
  }

}

watch(swiper, () => checkSwiperRef())
Expand Down