二维文物页 引入v-viewer

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/components/RelicDetail.vue

@@ -11,13 +11,33 @@
         frameborder="0"
         class="display-3d"
       />
-      <img
+      <div
         v-if="dimNumber === 2"
-        class="photo"
-        :src="imageList[0]"
-        alt=""
-        draggable="false"
+        v-viewer="{
+          button: true,
+          navbar: false,
+          title: false,
+          toolbar: false,
+          tooltip: false,
+          movable: true,
+          zoomable: true,
+          rotatable: true,
+          scalable: true,
+          transition: false,
+          fullscreen: false,
+          keyboard: true,
+          loop: false,
+        }"
+        class="photos"
       >
+        <img
+          v-for="(item, index) in imageList"
+          :key="index"
+          :src="item"
+          alt=""
+          draggable="false"
+        >
+      </div>
       <div class="btn-group">
         <button
           @click="isShowDesc = true"
@@ -157,10 +177,14 @@ export default {
       width: 100%;
       height: 60%;
     }
-    > .photo {
+    > .photos {
       width: 100%;
       max-height: 60%;
-      object-fit: contain;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
     }
     .btn-group {
       flex: 0 0 auto;

src/main.js

@@ -6,6 +6,8 @@ import UAParser from "@/libs/ua-parser.min.js"
 import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import clickOutside from "@/directives/v-click-outside.js"
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 
@@ -43,6 +45,7 @@ window.addEventListener('resize', () => {
 Vue.config.productionTip = false
 
 Vue.use(clickOutside)
+Vue.use(Viewer)
 
 new Vue({
   router,

yarn.lock

@@ -5596,6 +5596,11 @@ thread-loader@^3.0.0:
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
 
+throttle-debounce@^2.0.1:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -5736,6 +5741,14 @@ uuid@^8.3.2:
   resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+v-viewer@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz#39e36b534baab34076fb816704c6a734de0dc72f"
+  integrity sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==
+  dependencies:
+    throttle-debounce "^2.0.1"
+    viewerjs "^1.5.0"
+
 v8-compile-cache@^2.0.3:
   version "2.3.0"
   resolved "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -5754,6 +5767,11 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+viewerjs@^1.5.0:
+  version "1.11.0"
+  resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.0.tgz#eda25d96998356b4576fe25ef8d7cd6fd795a374"
+  integrity sha512-TE3XvfEXqKV+LdHsRdMSPsCaq0PfKDXm4SjGzfty7CzVxlDbBbT4x38vAqfXfNITmHhHUQefdxdg0Vv4ia+Z9w==
+
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"