nuxt Swiper5 thumbs

要在 Nuxt 中使用 Swiper 5 的 thumbs 功能，你可以按照以下步骤进行操作：

1. 安装 Swiper5 和 Swiper5 的 thumbs 插件：

npm install swiper @swiper/vue @swiper/ thumbs

2. 在 Nuxt 中创建一个插件来全局注册 Swiper：

在 `plugins/swiper.js` 文件中添加以下代码：

import Vue from 'vue'
import { Swiper, SwiperSlide, Thumbs } from 'swiper'

import 'swiper/css'
import 'swiper/css/thumbs'

Vue.use(Swiper)
Vue.use(SwiperSlide)
Vue.use(Thumbs)

3. 在需要使用 thumbs 的页面中引入 Swiper 和 thumbs 组件：

<template>
  <div>
    <swiper :thumbs="thumbsOptions">
      <swiper-slide v-for="item in items" :key="item.id">
        <img :src="item.img" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thumbsOptions: {
        swiper: null
      },
      items: [
        {id: 1, img: 'https://swiperjs.com/demos/images/nature-1.jpg'},
        {id: 2, img: 'https://swiperjs.com/demos/images/nature-2.jpg'},
        {id: 3, img: 'https://swiperjs.com/demos/images/nature-3.jpg'},
        {id: 4, img: 'https://swiperjs.com/demos/images/nature-4.jpg'},
        {id: 5, img: 'https://swiperjs.com/demos/images/nature-5.jpg'}
      ]
    }
  },
  mounted() {
    this.thumbsOptions.swiper = this.$refs.thumbsSwiper.$swiper
  }
}
</script>

在上面的代码中，我们创建了一个包含图片的 Swiper 组件，并且使用 thumbs 插件来创建缩略图。我们在 `thumbsOptions` 对象中设置了一个 `swiper` 属性，这个属性会在 `mounted` 钩子函数中获取到 thumbs 的 Swiper 实例，并将其设置为 `thumbsOptions` 对象的 `swiper` 属性。这样就可以实现 thumbs 功能了。