[Vue.js] vue-awesome-swiper vue2.7 setup script에서 내장 함수 쓰는 법

https://github.com/surmon-china/vue-awesome-swiper

GitHub - surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs

 

내가 원하는 기능은 autoplay되다가 마우스 오버를 하면 멈췄다가 mouseleave를 하면 다시 autoplay가 되는 기능을 원했다. 

예시로 나오는 코드들은 다 vue2버전인데 나는 2.7의 setup script로 바꾸고 싶었음!

 

<script setup lang='ts'>
const swiperRef = ref();

const onSwiperReady = (swiper) => {
	swiperRef.value = swiper;
};

const mouseover = () => {
	swiperRef.value.autoplay.stop();
};

const mouseleave = () => {
	swiperRef.value.autoplay.start();
};

</script>

<template>
<swiper
    :options="swiperOption"
    class="flex"
    @ready="onSwiperReady">
    ...
</swiper>
</template>

 

swiper에 @ready 함수에 swiperRef를 등록하면 그 안에 등록된 함수들을 사용할 수 있다. 

console을 찍으면 다 나옴!