From 38a50cb176a78aa5bf5b9f550eb1aab520b402a6 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 07 三月 2024 14:53:43 +0800
Subject: [PATCH] fix:图片修改
---
src/views/daoAnOffice/right/danger/imageSwiper.vue | 16 ++++++++++++----
1 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/src/views/daoAnOffice/right/danger/imageSwiper.vue b/src/views/daoAnOffice/right/danger/imageSwiper.vue
index 29f9ec6..680f9b0 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: {
@@ -38,6 +40,10 @@
swiperRef.value.slideNext();
}
+ const imageClick = (event) => {
+ new Viewer(event.target);
+ }
+
</script>
<style lang="scss" scoped>
@@ -53,8 +59,10 @@
.item_img {
display: block;
+ width: 100%;
height: 100%;
- object-fit: fill;
+ object-fit: cover;
+ cursor: pointer;
}
.swiper_button {
--
Gitblit v1.8.0