feat: add swiper (#261)

locales/en.yaml

@@ -81,3 +81,4 @@ menus:
   hsBarcode: Barcode
   hsQrcode: Qrcode
   hsCascader: Area Cascader
+  hsSwiper: Swiper Plugin

locales/zh-CN.yaml

@@ -81,3 +81,4 @@ menus:
   hsBarcode: 条形码
   hsQrcode: 二维码
   hsCascader: 区域级联选择器
+  hsSwiper: Swiper插件

package.json

@@ -62,6 +62,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.11",
     "rgb-hex": "^4.0.0",
+    "swiper": "^8.1.4",
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.33",
     "vue-form-create2": "^1.2.8",

pnpm-lock.yaml

@@ -90,6 +90,7 @@ specifiers:
   stylelint-config-recommended: ^6.0.0
   stylelint-config-standard: ^24.0.0
   stylelint-order: ^5.0.0
+  swiper: ^8.1.4
   typescript: ^4.6.3
   v-contextmenu: 3.0.0
   vite: ^2.9.6
@@ -146,6 +147,7 @@ dependencies:
   resize-observer-polyfill: 1.5.1
   responsive-storage: 1.0.11_vue@3.2.33
   rgb-hex: 4.0.0
+  swiper: 8.1.4
   v-contextmenu: 3.0.0_vue@3.2.33
   vue: 3.2.33
   vue-form-create2: 1.2.9
@@ -3449,6 +3451,15 @@ packages:
       ssr-window: 3.0.0
     dev: false
 
+  /dom7/4.0.4:
+    resolution:
+      {
+        integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+      }
+    dependencies:
+      ssr-window: 4.0.2
+    dev: false
+
   /domelementtype/2.3.0:
     resolution:
       {
@@ -7253,6 +7264,13 @@ packages:
       }
     dev: false
 
+  /ssr-window/4.0.2:
+    resolution:
+      {
+        integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+      }
+    dev: false
+
   /stable/0.1.8:
     resolution:
       {
@@ -7557,6 +7575,18 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /swiper/8.1.4:
+    resolution:
+      {
+        integrity: sha512-ho6ceKxqbDxV51qymVxwn1oB4CqTrsG3Y5pGW2aKlZxsT6NMdlow8ICUa+wD/m5l2T5ZD2B0yyqTihSSmLBV4A==
+      }
+    engines: { node: ">= 4.7.0" }
+    requiresBuild: true
+    dependencies:
+      dom7: 4.0.4
+      ssr-window: 4.0.2
+    dev: false
+
   /systemjs/6.12.1:
     resolution:
       {

src/router/modules/able.ts

@@ -128,6 +128,15 @@ const ableRouter = {
         title: $t("menus.hsCascader"),
         i18n: true
       }
+    },
+    {
+      path: "/able/swiper",
+      name: "reSwiper",
+      component: () => import("/@/views/able/swiper.vue"),
+      meta: {
+        title: $t("menus.hsSwiper"),
+        i18n: true
+      }
     }
   ]
 };

src/views/able/swiper.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import type { SwiperOptions } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
+
+type SwiperExampleOptions = Pick<
+  SwiperOptions,
+  | "navigation"
+  | "pagination"
+  | "scrollbar"
+  | "slidesPerView"
+  | "slidesPerGroup"
+  | "spaceBetween"
+  | "direction"
+  | "loop"
+  | "loopFillGroupWithBlank"
+  | "autoplay"
+>;
+interface SwiperExample {
+  id: number;
+  label: string;
+  options: Partial<SwiperExampleOptions>;
+}
+SwiperCore.use([Autoplay, Navigation, Pagination]);
+
+const swiperExample: SwiperExample[] = [
+  { id: 0, label: "Default", options: {} },
+  {
+    id: 1,
+    label: "Navigation",
+    options: {
+      navigation: true
+    }
+  },
+  {
+    id: 2,
+    label: "Pagination",
+    options: {
+      pagination: true
+    }
+  },
+  {
+    id: 3,
+    label: "Pagination dynamic",
+    options: {
+      pagination: { dynamicBullets: true }
+    }
+  },
+  {
+    id: 4,
+    label: "Pagination progress",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "progressbar"
+      }
+    }
+  },
+  {
+    id: 5,
+    label: "Pagination fraction",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "fraction"
+      }
+    }
+  },
+  {
+    id: 6,
+    label: "Slides per view",
+    options: {
+      pagination: {
+        clickable: true
+      },
+      slidesPerView: 3,
+      spaceBetween: 30
+    }
+  },
+  {
+    id: 7,
+    label: "Infinite loop",
+    options: {
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false
+      },
+      navigation: true,
+      pagination: {
+        clickable: true
+      },
+      loop: true
+    }
+  }
+];
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="font-medium">
+        Swiper插件（<el-link
+          href="https://github.com/nolimits4web/swiper"
+          target="_blank"
+          style="font-size: 16px; margin: 0 5px 4px 0"
+          >github地址</el-link
+        >）
+      </div>
+    </template>
+    <el-row :gutter="10">
+      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
+        <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
+        <swiper v-bind="item.options">
+          <swiper-slide v-for="i in 5" :key="i">
+            <div
+              class="flex justify-center items-center h-240px border-1px border-[#999] text-18px font-bold"
+            >
+              Slide{{ i }}
+            </div>
+          </swiper-slide>
+        </swiper>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-card__body) {
+  padding-top: 0;
+}
+</style>

src/views/login/index.vue

@@ -83,6 +83,7 @@ watch(imgCode, value => {
           :model="ruleForm"
           :rules="loginRules"
           size="large"
+          @keyup.enter="onLogin(ruleFormRef)"
         >
           <Motion :delay="100">
             <el-form-item prop="username">