swiper 优化

components.d.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    BreadCrumb: typeof import('./src/components/BreadCrumb/index.vue')['default']
+    CommonFooter: typeof import('./src/components/commonFooter/index.vue')['default']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    LeftSider: typeof import('./src/components/leftSider/index.vue')['default']
+    LeftSiderStu: typeof import('./src/components/leftSiderStu/index.vue')['default']
+    NavHeader: typeof import('./src/components/NavHeader/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    StatisticsSchool: typeof import('./src/components/statisticsSchool/index.vue')['default']
+  }
+}

src/pages/ksfx/stu_wdsj.vue

@@ -25,15 +25,27 @@
         :modules="modules"
         class="mySwiper"
       >
-			<swiper-slide class="mainSwiper" v-for="(item,index) in 5" :key="index">
-          <img :src="examIcon" srcset="">
+			<swiper-slide class="mainSwiper" v-for="(item,index) in imgArr" :key="index" @click="clickCurrent(item)">
+          <img :src="item" srcset="">
         </swiper-slide>
       </swiper>
 
       </div>
 
     </div>
-  </div>
+
+    <!-- dialog弹出框 -->
+    <el-dialog
+        v-model="dialogVisible"
+        title="试卷预览"
+        width="70%"
+        :before-close="handleClose"
+      >
+        <span class="dialogShow">
+          <img :src="examIcon" alt="">
+        </span>
+      </el-dialog>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -41,6 +53,7 @@ import examIcon from '@/assets/ksfx/examPreview.png';
 import { useRouter } from "vue-router";
 const router = useRouter();
 import { student_wdsj_list } from "~/pages/process/api";
+import { ElMessageBox } from 'element-plus'
 
 let StuLeftMenuNum = 1;
 
@@ -53,7 +66,7 @@ let subject_list = [{
   label: '数学'
 }]
 
-
+const imgArr = ref(["src/assets/ksfx/examPreview.png", "src/assets/ksfx/examPreview.png"]);
 
 import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
 // 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
@@ -73,6 +86,26 @@ import 'swiper/css/pagination';
 // setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
 const modules = [Autoplay, Pagination, Navigation, A11y];
 
+const clickCurrent = (item) => {
+  console.log(item, "87878");
+  dialogVisible.value = true;
+}
+
+
+
+const dialogVisible = ref(false)
+
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('确定要关闭吗？')
+    .then(() => {
+      done()
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+
+
 </script>
 
 <style scoped>
@@ -83,4 +116,10 @@ const modules = [Autoplay, Pagination, Navigation, A11y];
     display:inline-block;
   }
 }
+.dialogShow{
+  img{
+    width:100%;
+    display:inline-block;
+  }
+}
 </style>