Vue3引用swiper实现走马灯、模块滑动、左右切换等效果

swiper中文官网教程：swiperjs.com/vue

npm i swiper

这边以插件的想法去注册成组件。只是引用模版，并无实际业务场景

一、项目中创建插件文件夹，建个swiper.ts 文件

src》plugins》swiper.ts

import type { App } from 'vue'import { Swiper, SwiperSlide } from 'swiper/vue'// Import Swiper stylesimport 'swiper/less'import 'swiper/less/pagination'// SwiperCore.use([Pagination, Autoplay]);const plugins = [Swiper, SwiperSlide]const swiperPlugins = {  install: function (app: App) {    plugins.forEach(item => app.component(item.name, item))  }}export default swiperPlugins

二、在main.ts注册

import { createApp } from 'vue'
import App from './App.vue'import swiperPlugins from '@/plugins/swiper'

const app = createApp(App)app.use(swiperPlugins)

三、用hooks想法独立出操作事件

useSwiper.ts

import { ref } from 'vue'export const useSwiper = () => {  const useSwiperRef: any = ref(null) // swiper实例  // 初始化swiper  const onSwiper = (swiper: any) => {    useSwiperRef.value = swiper  }  const next = () => {    useSwiperRef.value.slideNext()  }  const prev = () => {    useSwiperRef.value.slidePrev()  }  return {    useSwiperRef,    onSwiper,    next,    prev  }}

四、.vue文件引用

<template>
<div>
  <swiper  @swiper="onSwiper">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
  <div @click="prev">上一页</div>
  <div @click="next">下一页</div>
</div>
</template>

<script setup lang="ts">  
  import { ref, unref, computed } from 'vue'  
  import { useSwiper } from '@/hooks/web/useSwiper'

  const { onSwiper, useSwiperRef, next, prev } = useSwiper()
<script>