vue3 element-plus-admin中引入swiper使用

第一步：安装swiper

pnpm install swiper

第二步：在需要使用的页面上引入swiper组件

// 引入swiper组件
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // 引入swiper样式
  import 'swiper/css';

注意：如果是js需要在页面中注册组件
js示例

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };

ts示例 ts引入后直接使用即可

import { Swiper, SwiperSlide } from 'swiper/vue';

const onSwiper = (swiper) => {
   console.log(swiper);
};
const onSlideChange = () => {
   console.log('slide change');
};

第三步：在页面中使用

 <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>

特别注意事项

一、
默认情况下，Swiper Vue 使用 Swiper 的核心版本（没有任何附加模块）。如果你想使用Navigation、Pagination等模块，你必须先安装它们：

以下是从以下位置导入的其他模块的列表swiper/modules：
//引入示例
import { Virtual } from 'swiper/modules';

Virtual- 虚拟幻灯片模块
Keyboard- 键盘控制模块
Mousewheel- 鼠标滚轮控制模块
Navigation- 导航模块
Pagination- 分页模块
Scrollbar- 滚动条模块
Parallax- 视差模块
FreeMode- 自由模式模块
Grid- 网格模块
Manipulation- 幻灯片操作模块（仅适用于Core版本）
Zoom- 变焦模块
Controller- 控制器模块
A11y- 辅助功能模块
History- 历史导航模块
HashNavigation- 哈希导航模块
Autoplay- 自动播放模块
EffectFade- 淡入淡出效果模块
EffectCube- 立方体效果模块
EffectFlip- 翻转效果模块
EffectCoverflow- Coverflow效果模块
EffectCards- 卡牌效果模块
EffectCreative- 创意效果模块
Thumbs- 拇指模块

二、
navigation.nextEl请注意，如果您传递这些参数而不指定其元素（例如，不指定、pagination.el等），Swiper Vue 组件将为导航、分页和滚动条创建所需的元素。

三、
引入样式

Swiper 包包含不同的 CSS、Less 和 SCSS 样式集：

• swiper/css- 仅核心 Swiper 样式
• swiper/css/bundle- 所有 Swiper 样式，包括所有模块样式（如导航、分页等）

模块样式（如果您已经导入了包样式则不需要）：

• swiper/css/a11y- A11y模块所需的样式
• swiper/css/autoplay- 自动播放模块所需的样式
• swiper/css/controller- 控制器模块所需的样式
• swiper/css/effect-cards- 卡牌效果模块所需的样式
• swiper/css/effect-coverflow- Coverflow Effect 模块所需的样式
• swiper/css/effect-creative- 创意效果模块所需的样式
• swiper/css/effect-cube- 立方体效果模块所需的样式
• swiper/css/effect-fade- 淡入淡出效果模块所需的样式
• swiper/css/effect-flip- 翻转效果模块所需的样式
• swiper/css/free-mode- 自由模式模块所需的样式
• swiper/css/grid- 网格模块所需的样式
• swiper/css/hash-navigation- 哈希导航模块所需的样式
• swiper/css/history- 历史模块所需的样式
• swiper/css/keyboard- 键盘模块所需的样式
• swiper/css/manipulation- 操作模块所需的样式
• swiper/css/mousewheel- 鼠标滚轮模块所需的样式
• swiper/css/navigation- 导航模块所需的样式
• swiper/css/pagination- 分页模块所需的样式
• swiper/css/parallax- 视差模块所需的样式
• swiper/css/scrollbar- 滚动条模块所需的样式
• swiper/css/thumbs- Thumbs 模块所需的样式
• swiper/css/virtual- 虚拟模块所需的样式
• swiper/css/zoom- Zoom 模块所需的样式

对于 Less 样式，替换css为less导入路径，例如：

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

对于 SCSS 样式，替换css为scss导入路径，例如：

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

官网地址：
Swiper Vue.js 组件