From b0a100049a8b54463519c53c06c6a10e64de95ab Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 29 二月 2024 16:49:04 +0800
Subject: [PATCH] feat:点击查看图片
---
package-lock.json | 6 ++++++
package.json | 1 +
src/views/index/index.vue | 2 +-
src/main.ts | 1 +
src/views/daoAnOffice/right/danger/imageSwiper.vue | 13 ++++++++++---
5 files changed, 19 insertions(+), 4 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9fc45bd..3ce9ffb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"mockjs": "^1.1.0",
"pinia": "^2.1.6",
"swiper": "^11.0.7",
+ "viewerjs": "^1.11.6",
"vue": "^3.3.4",
"vue-echarts": "^6.6.1",
"vue-router": "^4.2.5"
@@ -3562,6 +3563,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "node_modules/viewerjs": {
+ "version": "1.11.6",
+ "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.6.tgz",
+ "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
+ },
"node_modules/vite": {
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
diff --git a/package.json b/package.json
index dd736d4..6d63102 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"mockjs": "^1.1.0",
"pinia": "^2.1.6",
"swiper": "^11.0.7",
+ "viewerjs": "^1.11.6",
"vue": "^3.3.4",
"vue-echarts": "^6.6.1",
"vue-router": "^4.2.5"
diff --git a/src/main.ts b/src/main.ts
index ffc8509..779d7cf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@
import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'
import 'swiper/swiper-bundle.css';
+import 'viewerjs/dist/viewer.css';
import {registerEcharts} from "@/plugins/echarts"
//涓嶄娇鐢╩ock 璇锋敞閲婃帀
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 {
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 515e821..489bb3a 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -10,7 +10,7 @@
import RightTop1 from "./right-top2.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
-import chart2 from "./chart2.vue";
+// import chart2 from "./chart2.vue";
import BorderBox13 from "@/components/datav/border-box-13";
const config = {
header: ['<span style="color:#42C3E8;font-size: 16px">鎺掑悕</span>', '<span style="color:#42C3E8;font-size: 16px">琛屾斂鍖哄垝</span>','<span style="color:#42C3E8;font-size: 16px">鏁板��</span>'],
--
Gitblit v1.8.0