feat:点击查看图片

ZhangXianQiang

2024-02-29 b0a100049a8b54463519c53c06c6a10e64de95ab

 src/views/daoAnOffice/right/danger/imageSwiper.vue

@@ -2,9 +2,9 @@
  <div class="swiper_button mr-1" @click="prevSwiper">
    <img :src="leftIcon" class="">
  </div>
  <Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper">
    <SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide">
      <img :src="slide" class="item_img">
  <Swiper :slides-per-view="3" :space-between="18" class="image_swiper" @swiper="setSwiper" >
    <SwiperSlide v-for="(slide, index) in imageList" :key="index" class="image_slide" >
      <img :src="slide" class="item_img" @click="imageClick">
    </SwiperSlide>
  </Swiper>

@@ -14,12 +14,14 @@
</template>

<script setup>
import Viewer from 'viewerjs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import leftIcon from '@/assets/img/icon/arrow_left.png';
import rightIcon from '@/assets/img/icon/arrow_right.png';

import { defineProps,ref } from 'vue';

const imgView = null;
const swiperRef = ref(null);
const props = defineProps({
  imageList: {
@@ -36,6 +38,10 @@

 const nextSwiper = () => {
  swiperRef.value.slideNext();
 }

 const imageClick = (event) => {
  new Viewer(event.target);
 }

</script>
@@ -55,6 +61,7 @@
  display: block;
  height: 100%;
  object-fit: fill;
  cursor: pointer;
}

.swiper_button {