v-viewer改为viewer.js

src/views/CommonDrawList.vue

@@ -20,14 +20,11 @@
         :key="idx"
       >
         <img
-          v-viewer
           class=""
           :src="`${imgPrefix}/${drawName}`"
           alt=""
           draggable="false"
-          @show="onViewerShow"
-          @hide="onViewerHide"
-          @inited="onViewerInit"
+          @click="onClickImg"
         >
       </li>
     </ul>
@@ -96,6 +93,7 @@ import { ref, computed, } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { hasShownForword, likeRecord } from "@/store/index.js"
 import { drawTree } from "@/assets/draw-tree.js"
+import Viewer from 'viewerjs'
 
 const {
   windowSizeInCssForRef,
@@ -120,15 +118,37 @@ const imgPrefix = computed(() => {
 })
 
 const isViewingBigImage = ref(false)
-function onViewerShow(e) {
-  isViewingBigImage.value = true
-}
-function onViewerHide(e) {
-  isViewingBigImage.value = false
+let viewer = null
+function onClickImg(e) {
+  viewer = new Viewer(e.target, {
+    backdrop: 'static', // 点击空白区域不会关闭
+    button: true,
+    fullscreen: true,
+    inline: false,
+    keyboard: true,
+    movable: true,
+    navbar: false,
+    rotatable: false,
+    title: false,
+    toolbar: false,
+    tooltip: false,
+    transition: true,
+    zoomable: true,
+    shown() {
+      isViewingBigImage.value = true
+    },
+    hide() {
+      isViewingBigImage.value = false
+    },
+    hidden() {
+      viewer.destroy()
+      viewer = null
+    }
+  })
+  viewer.show()
 }
 function closeViewer() {
-  const closeBtn = document.querySelector('.viewer-close')
-  closeBtn.click()
+  viewer.hide()
 }
 
 const viewCount = ref(null)