优化预览图片

This commit is contained in:
kuaifan 2022-03-17 21:15:53 +08:00
parent 4cbc5040a2
commit eaf1a59e89
3 changed files with 10 additions and 15 deletions

View File

@ -16,7 +16,8 @@ export default {
computed: {
srcValue() {
const {src} = this;
if (src.substring(0, 2) === "//" ||
if (src.substring(0, 10) === "data:image" ||
src.substring(0, 2) === "//" ||
src.substring(0, 7) === "http://" ||
src.substring(0, 8) === "https://" ||
src.substring(0, 6) === "ftp://" ||

View File

@ -1,9 +1,10 @@
<template>
<Modal
:value="previewImageList.length > 0"
:mask="false"
:mask-closable="false"
:footer-hide="true"
:transition-names="['fade', 'fade']"
:transition-names="['', '']"
fullscreen
@on-visible-change="visibleChange"
class-name="common-preview-image">
@ -55,15 +56,6 @@ import {mapState} from "vuex";
export default {
name: 'PreviewImage',
components: {PreviewImageView},
data() {
return {
}
},
mounted() {
},
computed: {
...mapState([
'previewImageIndex',

View File

@ -1,10 +1,10 @@
<template>
<div ref="view" class="common-preview-view">
<div ref="view" class="common-preview-view no-dark-mode">
<template v-if="!isSingle">
<div class="preview-view-prev" :class="{ 'is-disabled': !infinite && isFirst }">
<div class="preview-view-prev" :class="{ 'is-disabled': !infinite && isFirst }" @click="prev">
<i class="taskfont">&#xe72d;</i>
</div>
<div class="preview-view-next" :class="{ 'is-disabled': !infinite && isLast }">
<div class="preview-view-next" :class="{ 'is-disabled': !infinite && isLast }" @click="next">
<i class="taskfont">&#xe733;</i>
</div>
</template>
@ -19,7 +19,7 @@
<i class="taskfont" @click="handleActions('clocelise')">&#xe7a6;</i>
</div>
</div>
<div class="preview-view-canvas">
<div class="preview-view-canvas no-dark-mode">
<img
v-for="(url, i) in urlList"
v-if="i === index"
@ -42,6 +42,8 @@
position: fixed;
right: 0;
top: 0;
background: rgba(0, 0, 0, .8);
backdrop-filter: blur(4px);
.preview-view-prev,
.preview-view-next {