Nuxt3中使用Swiper11并RTL兼容布局

背景

阿拉伯语是从右向左阅读的

安装Swiper

pnpm add swiper

使用

组件或页面面引入,我这里使用的是组件的方式

<script>
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/vue";
</script>
<template>
 <swiper
      :key="swiperKey"
      :dir="dir"
      :speed="1500"
  >
      <swiper-slide>
           具体的内容
      </swiper-slide>
   </swiper>
</template>

• 在当前swiper版本中设置RTL需要使用dir属性设置(ltr)（rtl)、前提是当前页面设置了dir属性 例：

• 为什么要给swiper添加key：因为dir属性只有在swiper初始化的时候会生效，我们这里用的是组件的方式不是使用实例化的方式创建的，所以在切换语言时更新swiper组件的key从而实现重新挂载，才能正常生效。