feat: 图片题

package-lock.json

@@ -37,6 +37,7 @@
         "three": "^0.145.0",
         "tinymce": "^5.10.3",
         "uuid": "^8.3.2",
+        "v-viewer": "^3.0.11",
         "vue": "^3.2.31",
         "vue-cropper": "^1.0.2",
         "vue-jsonp": "^2.0.0",
@@ -16566,6 +16567,18 @@
       "resolved": "https://registry.npmmirror.com/uzip/-/uzip-0.20201231.0.tgz",
       "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
     },
+    "node_modules/v-viewer": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.11.tgz",
+      "integrity": "sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==",
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "viewerjs": "^1.9.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993639567&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -16628,6 +16641,11 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "node_modules/viewerjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.2.tgz",
+      "integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
@@ -31669,6 +31687,15 @@
       "resolved": "https://registry.npmmirror.com/uzip/-/uzip-0.20201231.0.tgz",
       "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
     },
+    "v-viewer": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.11.tgz",
+      "integrity": "sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==",
+      "requires": {
+        "lodash": "^4.17.21",
+        "viewerjs": "^1.9.0"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993639567&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -31727,6 +31754,11 @@
         }
       }
     },
+    "viewerjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.2.tgz",
+      "integrity": "sha512-z7N9R91ORhtLvOUxN7GoIl+MFVVMbtWNB1T2UmTKuMlzc4EevS+/bletZcIwDf8RIUzk2CFMdleQzcsjsfLl+A=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",

package.json

@@ -42,6 +42,7 @@
     "three": "^0.145.0",
     "tinymce": "^5.10.3",
     "uuid": "^8.3.2",
+    "v-viewer": "^3.0.11",
     "vue": "^3.2.31",
     "vue-cropper": "^1.0.2",
     "vue-jsonp": "^2.0.0",

src/main.js

@@ -14,6 +14,14 @@ import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 const emitter = mitt();
 const app = createApp(App);
+import Viewer from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
+
+app.use(Viewer, {
+  defaultOptions: {
+    // 自定义默认配置
+  },
+});
 
 app.use(VXETable)
 app.use(VueParticles);

src/views/Answer/questions/QImgCheck.vue

@@ -8,7 +8,9 @@
         v-for="option in options"
         :key="option.option_key"
       >
-        <a-image width="100%" :src="option.option_config.image_url[0]" />
+        <div v-viewer>
+          <img :src="option.option_config.image_url[0]" />
+        </div>
         <div class="check-option">
           <a-checkbox :value="option.option_key"></a-checkbox>
           <div class="option" v-html="option.option" />
@@ -98,6 +100,7 @@ export default defineComponent({
     padding-right: 32px;
 
     :deep(img) {
+      width: 100%;
       border-radius: 10px;
       margin-bottom: 24px;
       object-fit: cover;

src/views/Answer/questions/QImgRadio.vue

@@ -8,7 +8,9 @@
         v-for="option in options"
         :key="option.option_key"
       >
-        <a-image width="100%" :src="option.option_config.image_url[0]" />
+        <div v-viewer>
+          <img :src="option.option_config.image_url[0]" />
+        </div>
         <div class="radio-option">
           <a-radio :value="option.option_key" />
           <div v-html="option.option" />
@@ -86,6 +88,7 @@ export default defineComponent({
     padding-right: 32px;
 
     :deep(img) {
+      width: 100%;
       border-radius: 10px;
       margin-bottom: 24px;
       object-fit: cover;

src/views/Answer/questions/QImgShow.vue

@@ -22,7 +22,9 @@
         </div>
       </div>
       <!-- 图片 -->
-      <a-image v-else :src="option.option_config.image_url[0]" />
+      <div v-else v-viewer class="viewer">
+        <img class="img" :src="option.option_config.image_url[0]" />
+      </div>
       <!-- 图片名 -->
       <div v-html="option.option" />
       <!-- 倒计时 -->
@@ -110,14 +112,18 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .imgs {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
 
   .img-show {
     margin-bottom: 18px;
     padding-right: 32px;
 
-    :deep(.ant-image-img) {
+    .viewer {
+      display: block;
+    }
+
+    :deep(.img) {
       width: 100%;
       margin: 24px 0;
       object-fit: cover;
@@ -127,7 +133,7 @@ export default defineComponent({
   }
 
   .side {
-    :deep(.ant-image-img) {
+    :deep(.img) {
       height: 176px;
       max-width: 176px;
     }