图片预览v-viewer

package-lock.json

@@ -17,6 +17,7 @@
         "pnpm": "^9.1.0",
         "qs": "^6.12.1",
         "roboto-fontface": "*",
+        "v-viewer": "^3.0.11",
         "vue": "^3.4.0",
         "vue-i18n": "9",
         "vue-router": "^4.3.0",
@@ -2196,8 +2197,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -3102,6 +3102,23 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/v-viewer": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.11.tgz",
+      "integrity": "sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "viewerjs": "^1.9.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/viewerjs": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.6.tgz",
+      "integrity": "sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw=="
+    },
     "node_modules/vite": {
       "version": "5.2.10",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.10.tgz",

package.json

@@ -19,6 +19,7 @@
     "pnpm": "^9.1.0",
     "qs": "^6.12.1",
     "roboto-fontface": "*",
+    "v-viewer": "^3.0.11",
     "vue": "^3.4.0",
     "vue-i18n": "9",
     "vue-router": "^4.3.0",

src/components/Enterprise/components/introduction.vue

@@ -13,7 +13,7 @@
     <v-divider class="my-3"></v-divider>
     <div>
       <h4>公司相册</h4>
-      <v-slide-group :show-arrows="true" class="mt-3 img-box">
+      <v-slide-group :show-arrows="true" class="mt-3 img-box" v-viewer>
         <!-- props.info.enterprise.albumList -->
         <v-slide-group-item v-for="val in list" :key="val">
           <v-img class="mr-3" width="200" height="120" :src="val" cover rounded></v-img>

src/main.js

@@ -8,6 +8,9 @@
 import { registerPlugins } from '@/plugins'
 import '@/styles/index.scss'
 
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+
 import App from './App.vue'
 import { createApp } from 'vue'
 
@@ -27,6 +30,20 @@ const app = createApp(App)
 
 app.use(pinia)
 app.use(router)
+app.use(Viewer, {
+  Options: {
+    'inline': true,
+    'title': false,
+    'button': true, // 右上角按钮
+    'navbar': true, // 底部缩略图
+    'zoomable': true, // 是否可以缩放
+    'rotatable': true, // 是否可以旋转
+    'scalable': true, // 是否可以翻转
+    'fullscreen': true, // 播放时是否支持全屏
+    'url': 'data-source',
+    'toolbar': true // 底部工具栏
+  }
+})
 
 registerPlugins(app)