完成移动端放大缩放浏览

web/package-lock.json

@@ -14688,6 +14688,22 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "dependencies": {
+        "throttle-debounce": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+          "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+        }
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -14763,6 +14779,11 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "viewerjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.11.2.tgz",
+      "integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -14905,7 +14926,7 @@
     },
     "vue-marquee-text-component": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/vue-marquee-text-component/-/vue-marquee-text-component-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-marquee-text-component/-/vue-marquee-text-component-1.2.0.tgz",
       "integrity": "sha512-wMqr7AnyCF1VjXFAnAXavAD2yCeiBULy6AbLet/YIGaI2KzuaUmi+Q3UyFYJOM2gWt994jl2PWilnkh9heLqAA==",
       "requires": {
         "core-js": "^3.6.5",

web/package.json

@@ -24,6 +24,7 @@
     "nuxt": "^2.15.8",
     "qrcodejs2": "0.0.2",
     "qs": "^6.11.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
     "vue-color": "^2.8.1",
     "vue-lazyload": "^3.0.0-rc.2",

web/pages/document/_id.vue

@@ -83,20 +83,38 @@
             <div class="mgt-20px"></div>
           </template>
           <div ref="docPages" class="doc-pages" @contextmenu.prevent>
-            <el-image
-              v-for="(page, index) in pages"
-              :key="index + page.src"
-              :src="page.src"
-              :alt="page.alt"
-              :preview-src-list="isMobile ? [page.src] : []"
-              lazy
-              class="doc-page"
-              :style="{
-                width: pageWidth + 'px',
-                height: pageHeight + 'px',
-              }"
-            >
-            </el-image>
+            <div v-if="isMobile" v-viewer>
+              <el-image
+                v-for="(page, index) in pages"
+                :key="index + page.src"
+                :src="page.src"
+                :alt="page.alt"
+                :data-source="page.lazySrc"
+                lazy
+                class="doc-page"
+                :style="{
+                  width: pageWidth + 'px',
+                  height: pageHeight + 'px',
+                }"
+              >
+              </el-image>
+            </div>
+            <div v-else>
+              <el-image
+                v-for="(page, index) in pages"
+                :key="index + page.src"
+                :src="page.src"
+                :alt="page.alt"
+                :data-source="page.lazySrc"
+                lazy
+                class="doc-page"
+                :style="{
+                  width: pageWidth + 'px',
+                  height: pageHeight + 'px',
+                }"
+              >
+              </el-image>
+            </div>
           </div>
           <div class="doc-page-more text-center">
             <div>下载文档到本地，方便使用</div>
@@ -823,6 +841,9 @@ export default {
 }
 </script>
 <style lang="scss">
+.viewer-canvas > img {
+  background-color: #fff;
+}
 .page-document {
   .doc-main {
     overflow: auto;

web/plugins/element-ui.js

@@ -1,9 +1,28 @@
 import Vue from 'vue'
 import Element from 'element-ui'
 import hotkeys from 'hotkeys-js'
+import 'viewerjs/dist/viewer.css'
+import VueViewer from 'v-viewer'
 
 // import locale from 'element-ui/lib/locale/lang/en'
 // Vue.use(Element, { locale })
+Vue.use(VueViewer, {
+  defaultOptions: {
+    button: true,
+    navbar: false,
+    title: false,
+    toolbar: false,
+    tooltip: false,
+    movable: true,
+    zoomable: true,
+    rotatable: true,
+    scalable: true,
+    transition: true,
+    fullscreen: true,
+    keyboard: true,
+    url: 'data-source',
+  },
+})
 
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'