From c57e196248dd04c19befcd8509422502d2308410 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=87=AF=E6=B0=91?= <xxwangkaimin@sina.com>
Date: Fri, 15 Aug 2025 14:21:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json              |  2 ++
 ruoyi-ui/src/main.js               | 12 ++++++++++++
 ruoyi-ui/src/utils/imagePreview.js | 17 +++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 ruoyi-ui/src/utils/imagePreview.js

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 5df0cedfca..b9d2ab3dc7 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -41,6 +41,8 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "splitpanes": "2.4.1",
+    "v-viewer": "^1.7.4",
+    "viewerjs": "^1.11.7",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index fab45dfff6..f69e857276 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -56,6 +56,18 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+// 图片预览插件
+import Viewer from "v-viewer"
+import "viewerjs/dist/viewer.css"
+
+Vue.use(Viewer, {
+  defaultOptions: {
+    zIndex: 9999999,
+    navbar: true,
+    fullscreen: false
+  }
+})
+
 Vue.use(directive)
 Vue.use(plugins)
 DictData.install()
diff --git a/ruoyi-ui/src/utils/imagePreview.js b/ruoyi-ui/src/utils/imagePreview.js
new file mode 100644
index 0000000000..59bf5b9ec4
--- /dev/null
+++ b/ruoyi-ui/src/utils/imagePreview.js
@@ -0,0 +1,17 @@
+import { api as viewerApi } from "v-viewer"
+
+/**
+ * 图片预览功能
+ * @param {{url: string,[alt]: string}[]} imageSource 预览的图片数组：[{ url: "图片地址", alt: "图片描述（可选）" }]
+ * @param initialViewIndex 开始下标
+ */
+export default function({ imageSource, initialViewIndex = 0 }) {
+  viewerApi({
+    options: {
+      toolbar: true,
+      url: "url",
+      initialViewIndex: initialViewIndex
+    },
+    images: imageSource
+  })
+}
-- 
Gitee