新增 Swiper组件

src/components/Swiper.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="swiper mySwiper">
+    <div class="swiper-wrapper">
+      <div v-for="item in imgs" class="swiper-slide">
+        <img :src="item" alt="" />
+      </div>
+    </div>
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  setup() {
+    let swiper = ref({});
+    let imgs = ref([
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+    ]);
+
+    function init() {
+      swiper.value = new Swiper(".mySwiper", {
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      });
+    }
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+      imgs,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide1 {
+  text-align: center;
+  font-size: 18px;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 85%;
+  height: 100%;
+  margin: 0px auto;
+  object-fit: cover;
+}
+
+/*去掉默认样式*/
+.swiper-button-prev:after {
+  display: none;
+}
+.swiper-button-next:after {
+  display: none;
+}
+/*自定义样式*/
+.swiper-button-prev {
+  width: 26px;
+  height: 26px;
+  background: url("/prev.png");
+  top: 55%;
+  left: 0;
+  background-size: contain;
+}
+
+.swiper-button-next {
+  width: 26px;
+  height: 26px;
+  top: 55%;
+  background: url("/next.png");
+  right: 0;
+  background-size: contain;
+}
+</style>