From b0a100049a8b54463519c53c06c6a10e64de95ab Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 29 二月 2024 16:49:04 +0800
Subject: [PATCH] feat:点击查看图片
---
src/views/daoAnOffice/right/danger/imageSwiper.vue | 13 ++++++++++---
1 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/src/views/daoAnOffice/right/danger/imageSwiper.vue b/src/views/daoAnOffice/right/danger/imageSwiper.vue
index 29f9ec6..0b841c9 100644
--- a/src/views/daoAnOffice/right/danger/imageSwiper.vue
+++ b/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 {
--
Gitblit v1.8.0