Skip to content

V
ViewUIPlus

ViewDesign / ViewUIPlus
上一次同步 接近 2 年

通知 1
Star 0
Fork 0
V
ViewUIPlus

体验新版 GitCode，发现更多精彩内容 >>

提交 06256dbc 编写于 作者: H Hunter
浏览文件
操作

revert preview

上级 4b28d806
隐藏空白更改
内联 并排
Showing with 83 addition and 65 deletion
src/components/image/image-preview.vue
浏览文件 @ 06256dbc
<template>
<teleport to="body" :disabled="!transfer">
<transition name="fade">
<div :class="[prefixCls + '-wrapper']" v-if="modelValue">
<div :class="[prefixCls + '-mark']" v-if="previewList.length > 0" @click.stop="handleClickMark">
<Spin
v-if="status === 'loading'"
size="large"
/>
<div
v-else-if="status === 'failed'"
:class="[prefixCls + '-fail']"
>
<div v-if="modelValue" :class="[prefixCls + '-mask']" :style="maskStyle"></div>
</transition>
<transition name="fade">
<div :class="[prefixCls + '-wrap']" v-if="modelValue" :style="maskStyle">
<div :class="[prefixCls]" v-if="modelValue" v-bind="$attrs" @click.stop="handleClickMask">
<Spin v-if="status === 'loading'" size="large" :class="[prefixCls + '-loading']" />
<div v-else-if="status === 'failed'" :class="[prefixCls + '-fail']">
<span>{{failLang}}</span>
</div>
<img
:src="currentSrc"
:key="currentIndex.toString()"
v-show="status === 'loaded'"
:style="imageStyle"
:class="imgClasses"
@click.stop
......@@ -24,30 +20,30 @@
@load="handleImageLoad"
@error="handleImageError"
/>
<div :class="[prefixCls + '-operations']">
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('zoomIn')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7197" width="200" height="200"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" p-id="7198" fill="#ffffff"></path><path d="M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" p-id="7199" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('zoomOut')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7412" width="200" height="200"><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" p-id="7413" fill="#ffffff"></path><path d="M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" p-id="7414" fill="#ffffff"></path></svg>
<svg v-show="!this.original" :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('original')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26672" width="200" height="200"><path d="M358.058667 128H156.970667A28.970667 28.970667 0 0 0 128 157.013333v202.837334c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434666a14.506667 14.506667 0 0 0 14.506667-14.506666V200.448h157.610667a14.506667 14.506667 0 0 0 14.506666-14.506667V142.506667a14.506667 14.506667 0 0 0-14.506666-14.506667zM881.493333 649.642667h-43.434666a14.506667 14.506667 0 0 0-14.506667 14.506666v159.402667h-157.610667a14.506667 14.506667 0 0 0-14.506666 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506666 14.506667h201.088c16 0 28.970667-12.928 28.970667-29.013333v-202.837334a14.506667 14.506667 0 0 0-14.506667-14.506666zM358.058667 823.552H200.448v-159.402667a14.506667 14.506667 0 0 0-14.506667-14.506666H142.506667a14.506667 14.506667 0 0 0-14.506667 14.506666v202.88c0 16 12.970667 28.970667 29.013333 28.970667h201.045334a14.506667 14.506667 0 0 0 14.506666-14.506667v-43.434666a14.506667 14.506667 0 0 0-14.506666-14.506667zM866.986667 128h-201.088a14.506667 14.506667 0 0 0-14.506667 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506667 14.506667h157.610666v159.402667c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434667a14.506667 14.506667 0 0 0 14.506666-14.506666V156.970667A28.928 28.928 0 0 0 866.986667 128z" p-id="26673" fill="#ffffff"></path></svg>
<svg v-show="this.original" :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('original')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1976" width="200" height="200"><path d="M864 128H160c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h704c19.2 0 32-12.8 32-32V160c0-19.2-12.8-32-32-32z m-32 704H192V192h640v640z" p-id="1977" fill="#ffffff"></path><path d="M320 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32zM640 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32z" p-id="1978" fill="#ffffff"></path><path d="M512 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="1979" fill="#ffffff"></path><path d="M512 640m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="1980" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('rotateLeft')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13308" width="200" height="200"><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z m191.3-491.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z" p-id="13309" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('rotateRight')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13521" width="200" height="200"><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z" p-id="13522" fill="#ffffff"></path></svg>
</div>
<Icon
:class="[prefixCls + '-arrow-left', { [prefixCls + '-arrow-disabled']: hasLeftSwitchEnd }]"
type="ios-arrow-back"
@click.stop="handleSwitch(false)"
/>
<Icon
:class="[prefixCls + '-arrow-right', { [prefixCls + '-arrow-disabled']: hasRightSwitchEnd }]"
type="ios-arrow-forward"
@click.stop="handleSwitch(true)"
/>
<Icon
:class="[prefixCls + '-arrow-close']"
type="md-close"
@click.stop="handleClose"
/>
</div>
<div :class="[prefixCls + '-operations']">
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('zoomIn')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7197" width="200" height="200"><path d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" p-id="7198" fill="#ffffff"></path><path d="M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" p-id="7199" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('zoomOut')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7412" width="200" height="200"><path d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" p-id="7413" fill="#ffffff"></path><path d="M921 867L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z" p-id="7414" fill="#ffffff"></path></svg>
<svg v-show="!this.original" :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('original')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26672" width="200" height="200"><path d="M358.058667 128H156.970667A28.970667 28.970667 0 0 0 128 157.013333v202.837334c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434666a14.506667 14.506667 0 0 0 14.506667-14.506666V200.448h157.610667a14.506667 14.506667 0 0 0 14.506666-14.506667V142.506667a14.506667 14.506667 0 0 0-14.506666-14.506667zM881.493333 649.642667h-43.434666a14.506667 14.506667 0 0 0-14.506667 14.506666v159.402667h-157.610667a14.506667 14.506667 0 0 0-14.506666 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506666 14.506667h201.088c16 0 28.970667-12.928 28.970667-29.013333v-202.837334a14.506667 14.506667 0 0 0-14.506667-14.506666zM358.058667 823.552H200.448v-159.402667a14.506667 14.506667 0 0 0-14.506667-14.506666H142.506667a14.506667 14.506667 0 0 0-14.506667 14.506666v202.88c0 16 12.970667 28.970667 29.013333 28.970667h201.045334a14.506667 14.506667 0 0 0 14.506666-14.506667v-43.434666a14.506667 14.506667 0 0 0-14.506666-14.506667zM866.986667 128h-201.088a14.506667 14.506667 0 0 0-14.506667 14.506667v43.434666c0 7.978667 6.570667 14.506667 14.506667 14.506667h157.610666v159.402667c0 7.978667 6.528 14.506667 14.506667 14.506666h43.434667a14.506667 14.506667 0 0 0 14.506666-14.506666V156.970667A28.928 28.928 0 0 0 866.986667 128z" p-id="26673" fill="#ffffff"></path></svg>
<svg v-show="this.original" :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('original')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1976" width="200" height="200"><path d="M864 128H160c-19.2 0-32 12.8-32 32v704c0 19.2 12.8 32 32 32h704c19.2 0 32-12.8 32-32V160c0-19.2-12.8-32-32-32z m-32 704H192V192h640v640z" p-id="1977" fill="#ffffff"></path><path d="M320 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32zM640 384v288c0 19.2 12.8 32 32 32s32-12.8 32-32V352c0-19.2-12.8-32-32-32h-32c-19.2 0-32 12.8-32 32s12.8 32 32 32z" p-id="1978" fill="#ffffff"></path><path d="M512 384m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="1979" fill="#ffffff"></path><path d="M512 640m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="1980" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('rotateLeft')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13308" width="200" height="200"><path d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z m191.3-491.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z" p-id="13309" fill="#ffffff"></path></svg>
<svg :class="[prefixCls + '-operations-item']" @click.stop="handleOperation('rotateRight')" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13521" width="200" height="200"><path d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8zM880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z" p-id="13522" fill="#ffffff"></path></svg>
</div>
<Icon
:class="[prefixCls + '-arrow-left', { [prefixCls + '-arrow-disabled']: hasLeftSwitchEnd }]"
type="ios-arrow-back"
@click.stop="handleSwitch(false)"
/>
<Icon
:class="[prefixCls + '-arrow-right', { [prefixCls + '-arrow-disabled']: hasRightSwitchEnd }]"
type="ios-arrow-forward"
@click.stop="handleSwitch(true)"
/>
<Icon
:class="[prefixCls + '-arrow-close']"
type="md-close"
@click.stop="handleClose"
/>
</div>
</transition>
</teleport>
......@@ -61,6 +57,7 @@
import Icon from '../icon/icon.vue';
import KeyCode from '../../utils/keyCode';
import Spin from '../spin/spin.vue';
import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
const prefixCls = 'ivu-image-preview';
......@@ -112,25 +109,21 @@
transition: true,
original: false, // display by original size
prevOverflow: '', // prevent body scrolling
status: 'loading' // image status
status: 'loading', // image status
zIndex: 1000,
maskIndex: this.getMaskIndex()
}
},
computed: {
operations() {
return [
{ icon: 'ios-add-circle-outline', value: 'zoomIn' },
{ icon: 'ios-remove-circle-outline', value: 'zoomOut' },
{ icon: this.original ? 'ios-barcode-outline' : 'ios-qr-scanner', value: 'original' },
{ icon: 'ios-refresh', value: 'rotateLeft' },
{ icon: 'ios-refresh', value: 'rotateRight' }
]
},
imgClasses() {
return {
[prefixCls + '-image']: true,
[prefixCls + '-image-transition']: this.transition,
[prefixCls + '-image-limit']: !this.original
};
return [
prefixCls + '-image',
{
[prefixCls + '-hidden']: this.status === 'failed',
[prefixCls + '-transition']: this.transition,
[prefixCls + '-limit']: !this.original
}
];
},
imageStyle() {
let translateX = this.translate.x / this.scale;
......@@ -155,6 +148,11 @@
`
};
},
maskStyle() {
return {
zIndex: this.maskIndex + this.zIndex
};
},
hasRightSwitchEnd() {
const { currentIndex, infinite, previewList} = this;
const len = previewList.length;
......@@ -182,7 +180,7 @@
this.$emit('update:modelValue', false);
this.$emit('on-close');
},
handleClickMark() {
handleClickMask() {
if (!this.maskClosable) return;
this.handleClose();
},
......@@ -278,6 +276,10 @@
},
handleImageError() {
this.status = 'failed';
},
getMaskIndex () {
transferIncrease();
return transferIndex;
}
},
watch: {
......@@ -288,6 +290,7 @@
this.original = false;
this.prevOverflow = this.getBodyOverflow();
this.setBodyOverflow('hidden');
this.maskIndex = this.getMaskIndex();
} else {
this.setBodyOverflow(this.prevOverflow);
}
......
src/styles/components/image-preview.less
浏览文件 @ 06256dbc
@image-preview-prefix-cls: ~"@{css-prefix}image-preview";
.@{image-preview-prefix-cls} {
&-wrapper {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
&-mask {
.mask;
}
&-wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
user-select: none;
overflow: hidden;
}
&-mark {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&-transition {
transition: transform .3s ease;
}
&-image {
&-transition {
transition: transform .3s ease;
}
&-limit {
max-width: 100%;
max-height: 100%;
}
&-limit {
max-width: 100%;
max-height: 100%;
}
&-loading, &-fail {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&-fail {
color: @white;
font-size: @font-size-large;
}
&-hidden {
display: none;
}
&-operations {
display: flex;
height: 40px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或