当前位置：首页>时尚娱乐

芜湖~setup语法糖中swiper的module引入竟是这样...

时尚娱乐2023-07-17 17:03

前言

笔者最近闲的一批，就开始瞎搞一些东西。写了个h5的项目，有个轮播图，诶，自己写的轮子不是很完美，就想着要不咱也用用别人写的，看看差距在哪。好了，然后某网友宝给俺推荐了swiper，说老神了，行啊，那我就用它吧。

然后我就遇到了一个问题，我用setup语法糖的时候，引入了页码怎么着都不生效啊，一顿找，官方demo是这样的

<template>  <swiper :pagination="true" :modules="modules" class="mySwiper">    <swiper-slide>Slide 1</swiper-slide>    <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>    <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>    <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>    <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>  </swiper></template><script>  // Import Swiper Vue.js components  import { Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles  import 'swiper/css';
  import 'swiper/css/pagination';
  import './style.css';
  // import required modules  import { Pagination } from 'swiper/modules';
  export default {    components: {      Swiper,      SwiperSlide,    },    setup() {      return {        modules: [Pagination],      };    },  };</script>

这样当然没问题了，不就是setup里面return一个modules吗？那按照vue3的说法，我使用setup语法糖直接引用就能用了。可是这modules也是这样用吗？我就各种import啊，没啥卵用，又去vue3文档里面看啊看，只看到cssStyleModule，可人家是管style的啊，又去问了朋友，朋友也是看文档，没有个所以然。

我看着main.ts文件里面，灵机一动，有没有可能它也是.use来使用呢

于是我又看了一边swiper的文档，锁定了一个目标，SwiperCore，根据多年的开发经验，这个Core肯定就是核心了，那我们就来用一用

<script setup lang="ts">import { Swiper, SwiperSlide } from 'swiper/vue'import SwiperCore from 'swiper'import 'swiper/css'import 'swiper/css/pagination'import { Pagination } from 'swiper/modules'//...SwiperCore.use([Pagination])//...</script>
<template>  <div v-if="banners.length" class="slider-wrapper">    <swiper      :slides-per-view="1"      :space-between="10"      :pagination="true"      @swiper="onSwiper"      @slideChange="onSlideChange"    >      <swiper-slide v-for="item in banners">        <img class="slider-item" :src="item.imageUrl"/>      </swiper-slide>    </swiper>  </div></template>

amazing~还真是这样。又学会了一个没啥用的小技能

相关文章

热门推荐

热门点击