上传图片后，查看图片

package.json

@@ -29,6 +29,7 @@
     "js-md5": "^0.7.3",
     "moment": "^2.24.0",
     "register-service-worker": "^1.6.2",
+    "viewerjs": "^1.3.6",
     "vue": "^2.6.10",
     "vue-router": "^3.1.2",
     "vue-splitpane": "^1.0.4",

src/features/OnlineExam/Examing/UploadPhotos.vue

@@ -26,23 +26,6 @@
       </div>
     </draggable>
 
-    <Modal title="查看图片" v-model="visible" footer-hide>
-      <img
-        :src="imgUrl"
-        v-if="visible"
-        :style="{ width: '100%', transform: 'rotate(' + rotate + 'deg)' }"
-      />
-      <div style="display: flex; justify-content: center;">
-        <Button
-          style="margin: auto;"
-          type="primary"
-          icon="md-redo"
-          @click="rotate += 90"
-        >
-          旋转图片
-        </Button>
-      </div>
-    </Modal>
     <div>最多上传6张图片</div>
 
     <Modal
@@ -112,6 +95,8 @@ import VueQrcode from "@chenfengyuan/vue-qrcode";
 import draggable from "vuedraggable";
 import { createNamespacedHelpers } from "vuex";
 const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 
 export default {
   name: "UploadPhotos",
@@ -123,7 +108,6 @@ export default {
   },
   data() {
     return {
-      imgUrl: "",
       visible: false,
       uploadModalVisible: false,
       rotate: 0,
@@ -141,9 +125,34 @@ export default {
   methods: {
     ...mapMutations(["updateUploadModalVisible"]),
     handleView(name) {
-      this.imgUrl = name;
-      this.rotate = 0;
-      this.visible = true;
+      const viewer = new Viewer(document.querySelector(`img[src="${name}"]`), {
+        container: "#app",
+        zIndex: 99999,
+        title: false,
+        toolbar: {
+          zoomIn: 1,
+          zoomOut: 1,
+          oneToOne: 1,
+          reset: 1,
+          prev: 0,
+          play: {
+            show: 0,
+            size: "large",
+          },
+          next: 0,
+          rotateLeft: 1,
+          rotateRight: 1,
+          flipHorizontal: 1,
+          flipVertical: 1,
+        },
+        viewed() {
+          // viewer.zoomTo(1);
+        },
+        hidden() {
+          viewer.destroy();
+        },
+      });
+      viewer.show();
     },
     handleRemove(file) {
       // const fileList = this.$refs.upload.fileList;

yarn.lock

@@ -10621,6 +10621,11 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+viewerjs@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/viewerjs/-/viewerjs-1.3.6.tgz#5b2e68c48623f2ef117da2e2a382059cab147df9"
+  integrity sha512-3SCxFtvFP+mPzudBNexUA0eTI6pjCP+xlJLENs9SyaocWXUq0Jjx5HXWQfKKU0GCpkyPjfFnZefevMtGUmjjNQ==
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"