diff --git a/package-lock.json b/package-lock.json index 1ae68ed6..93c89cfb 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ee97fc40..637a5c10 100644 --- a/package.json +++ b/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", diff --git a/src/main.js b/src/main.js index 55004b1a..c28b6a1d 100644 --- a/src/main.js +++ b/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); diff --git a/src/views/Answer/questions/QImgCheck.vue b/src/views/Answer/questions/QImgCheck.vue index e142cf74..02f03970 100644 --- a/src/views/Answer/questions/QImgCheck.vue +++ b/src/views/Answer/questions/QImgCheck.vue @@ -8,7 +8,9 @@ v-for="option in options" :key="option.option_key" > - +
+ +
@@ -98,6 +100,7 @@ export default defineComponent({ padding-right: 32px; :deep(img) { + width: 100%; border-radius: 10px; margin-bottom: 24px; object-fit: cover; diff --git a/src/views/Answer/questions/QImgRadio.vue b/src/views/Answer/questions/QImgRadio.vue index d83e3b26..cf132657 100644 --- a/src/views/Answer/questions/QImgRadio.vue +++ b/src/views/Answer/questions/QImgRadio.vue @@ -8,7 +8,9 @@ v-for="option in options" :key="option.option_key" > - +
+ +
@@ -86,6 +88,7 @@ export default defineComponent({ padding-right: 32px; :deep(img) { + width: 100%; border-radius: 10px; margin-bottom: 24px; object-fit: cover; diff --git a/src/views/Answer/questions/QImgShow.vue b/src/views/Answer/questions/QImgShow.vue index 725f2c24..28712823 100644 --- a/src/views/Answer/questions/QImgShow.vue +++ b/src/views/Answer/questions/QImgShow.vue @@ -22,7 +22,9 @@
- +
+ +
@@ -110,14 +112,18 @@ export default defineComponent({