Nuxtjs如果使用useHead()匯入swiper,除了在onMounted呼叫，切換報錯前面使用 await nextTick();

漫漫长路</>發表於2024-04-24
UXJSAI

注意：

 await nextTick();  如果沒用，vue切換的時候可能有問題
<script lang="ts" setup>
import { DArrowRight } from "@element-plus/icons-vue";
useHead({
  script: [
    {
      src: "/script/swiper.js",
    },
  ],
  link: [
    {
      rel: "stylesheet",
      type: "text/css",
      href: "/css/swiper.css",
    },
  ],
});
import { ref, onMounted, nextTick } from "vue";
import _ from "lodash";
const apiUrl = import.meta.env.VITE_API_URL;
import { productCenterPageAPI } from "~/utils/api";
// 首頁詳情
let homeList = ref<any>([]);
async function homeFun() {
  const home: any = await productCenterPageAPI();
  homeList.value = home;
  await nextTick();
  swiper1Container();
  console.log(homeList.value, "homeFunhomeFun");
  useHead({
    meta: [
      { name: "description", content: homeList.value.seo.des },
      {
        hid: "keywords",
        name: "keywords",
        content: homeList.value.seo.key,
      },
    ],
  });
  await nextTick();
  swiper1Container();
}

// 輪播圖
const swiper1Container = () => {
  const swiper = new Swiper(".swiper-container", {
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    loop: true,
    initialSlide: 2,
    spaceBetween: 20,
    centeredSlides: true,
    slidesPerView: 1.9,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    breakpoints: {
      320: {
        //當螢幕寬度大於等於320
        slidesPerView: 1,
        spaceBetween: 10,
      },
      768: {
        //當螢幕寬度大於等於768
        slidesPerView: 1.8,
        spaceBetween: 20,
      },
      1280: {
        //當螢幕寬度大於等於1280
        slidesPerView: 1.9,
        spaceBetween: 30,
      },
    },
    // 如果需要前進後退按鈕
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
  });
};

onMounted(() => {
  homeFun();
  // console.log(`${process.env.API_URL}`, "process.env.API_URL", apiUrl);
});
</script>

相關文章