多媒体渲染：图片浏览

package.json

@@ -20,6 +20,7 @@
     "moment": "^2.29.1",
     "tailwindcss": "^2.1.4",
     "ua-parser-js": "^0.7.28",
+    "viewerjs": "^1.10.0",
     "vue": "^3.0.11",
     "vue-router": "4.0.6"
   },

src/features/mark/MultiMediaMarkBody.vue

@@ -31,9 +31,11 @@
 <script setup lang="ts">
 import { getJSON } from "@/api/jsonMark";
 import { store } from "./store";
-import { ref, watch } from "vue";
+import { onUpdated, ref, watch } from "vue";
 import { renderRichText } from "@/utils/renderJSON";
 import type { RichTextJSON } from "@/types";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 
 interface StudentAnswer {
   mainNumber: number;
@@ -49,7 +51,6 @@ interface QuestionForRender {
   standardAnswerr: Array<RichTextJSON> | null;
 }
 
-const rendered = ref(null as unknown as HTMLDivElement);
 const questions = ref([] as Array<QuestionForRender>);
 async function updateStudentAnswerJSON() {
   return getJSON(store.currentTask?.jsonUrl as string);
@@ -108,6 +109,22 @@ watch(
   },
   { immediate: true }
 );
+
+let viewer: Viewer = null as unknown as Viewer;
+onUpdated(() => {
+  viewer && viewer.destroy();
+  viewer = new Viewer(
+    document.querySelector(".rich-text-question-container") as HTMLElement,
+    // document.querySelector("#app") as HTMLElement,
+    {
+      // inline: true,
+      viewed() {
+        // viewer.zoomTo(1);
+      },
+      zIndex: 10000,
+    }
+  );
+});
 </script>
 
 <style scoped>
@@ -124,4 +141,7 @@ watch(
 .rich-text-question-container img.inline {
   display: inline;
 }
+.rich-text-question-container img {
+  cursor: pointer;
+}
 </style>

yarn.lock

@@ -1416,6 +1416,11 @@ util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil-deprecate%2Fdownload%2Futil-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
+viewerjs@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.nlark.com/viewerjs/download/viewerjs-1.10.0.tgz#6dcd693b548dd6d7c8371b193136d1eae180621f"
+  integrity sha1-bc1pO1SN1tfINxsZMTbR6uGAYh8=
+
 vite@^2.3.6:
   version "2.3.6"
   resolved "https://registry.nlark.com/vite/download/vite-2.3.6.tgz#1f7cfde88a51a802d69000c7bac85d481c2e871c"