feat: 图片预览插件

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",

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()

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
+  })
+}