liankao/src/pages/ksfx/stu_wdsj.vue

<template>
  <div class="stu_stfx">
    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px h-full" style="background-color: #fff;">
        <leftSiderStu :StuLeftMenuNum="StuLeftMenuNum" />
      </div>

      <div class="w-1012px p-12 blueBg">

        <div class="flex my-20px items-center">
          <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>


        <swiper :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true"
        :pagination="{	clickable: true}"
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
      >
			<swiper-slide class="mainSwiper" v-for="(item,index) in imgArr" :key="index" @click="clickCurrent(item)">
          <img :src="item" srcset="">
        </swiper-slide>
      </swiper>

      </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>
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;

let normal_subject = $ref("");
let subject_list = [{
  value: '1',
  label: '语文'
}, {
  value: '2',
  label: '数学'
}]

const imgArr = ref(["src/assets/ksfx/examPreview.png", "src/assets/ksfx/examPreview.png"]);

import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
//默认滑动效果（这里面注释掉的可以不要）
// const onSwiper = swiper => {
// 	console.log(swiper);
// };
// const onSlideChange = e => {
// 	// swiper切换的时候执行的方法
// 	console.log('slide change', e.activeIndex);
// };
// 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>
@import '@/styles/ksfx.css';
.mainSwiper{
  text-align: center;
  img{
    display:inline-block;
  }
}
.dialogShow{
  img{
    width:100%;
    display:inline-block;
  }
}
</style>