hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片题

Browse Source
This commit is contained in:
steven
2023-02-24 11:37:10 +08:00
parent ae1cc993a3
commit c152d091ff
6 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

8
src/main.js
View File

@@ -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);

5
src/views/Answer/questions/QImgCheck.vue
View File

@@ -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;

5
src/views/Answer/questions/QImgRadio.vue
View File

@@ -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;

14
src/views/Answer/questions/QImgShow.vue
View File

@@ -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;
}