<template>
<transition name="viewer-fade">
<div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
<div class="el-image-viewer__mask" @click="hide"></div>
<!-- CLOSE -->
<span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
<i class="el-icon-circle-close"></i>
</span>
<!-- ARROW -->
<template v-if="!isSingle">
<span
class="el-image-viewer__btn el-image-viewer__prev"
:class="{ 'is-disabled': !infinite && isFirst }"
@click="prev"
>
<i class="el-icon-arrow-left" />
</span>
<span
class="el-image-viewer__btn el-image-viewer__next"
:class="{ 'is-disabled': !infinite && isLast }"
@click="next"
>
<i class="el-icon-arrow-right" />
</span>
</template>
<!-- ACTIONS -->
<div class="el-image-viewer__btn el-image-viewer__actions">
<div class="el-image-viewer__actions__inner">
<i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
<i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
<i class="el-image-viewer__actions__divider"></i>
<i :class="mode.icon" @click="toggleMode"></i>
<i class="el-image-viewer__actions__divider"></i>
<i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
<i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
</div>
</div>
<!-- CANVAS -->
<div class="el-image-viewer__canvas">
<img
v-for="(url, i) in urlList"
v-if="i === index"
ref="img"
class="el-image-viewer__img"
:key="url"
:src="currentImg"
:style="imgStyle"
@load="handleImgLoad"
@error="handleImgError"
@mousedown="handleMouseDown"
/>
</div>
</div>
</transition>
</template>
<script>
import Vue from 'vue';
const isServer = Vue.prototype.$isServer;
// element, event, handler,改成自调用retuan监听器函数，或者普通的函数不用return函数绑定监听器
const on = (function (element, event, handler) {
// console.log('%c [on---document ]-71', 'font-size:13px; background:pink; color:#bf2c9f;', element, event, handler);
if (!isServer && document.addEventListener) {
// if (element && event && handler) {
// element.addEventListener(event, handler, false);
// console.log(
// '%c [ on监听器事件触发了吗 ]-67',
// 'font-size:13px; background:pink; color:#bf2c9f;',
// 'on监听器事件触发'
// );
// }
return function(element, event, handler) {
// console.log('%c [ element, event, handler ： ]-73', 'font-size:13px; background:pink; color:#bf2c9f;', element,event,handler)
if (element && event && handler) {
element.addEventListener(event, handler, false);
console.log('%c [ on监听器事件触发了吗 ]-67', 'font-size:13px; background:pink; color:#bf2c9f;', 'on监听器事件触发')
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
/* istanbul ignore next */
const off = (function (element,event,handler) {
console.log(
'%c [ off监听器事件触发了吗 ]-67',
'font-size:13px; background:pink; color:#bf2c9f;',
'off监听器事件触发'
);
if (!isServer && document.removeEventListener) {
// if (element && event) {
// element.removeEventListener(event, handler, false);
// }
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
})();
const isFirefox = function () {
return !isServer && !!window.navigator.userAgent.match(/firefox/i);
};
const rafThrottle = function (fn) {
let locked = false;
return function (...args) {
if (locked) return;
locked = true;
window.requestAnimationFrame((_) => {
fn.apply(this, args);
locked = false;
});
};
};
const Mode = {
CONTAIN: {
name: 'contain',
icon: 'el-icon-full-screen',
},
ORIGINAL: {
name: 'original',
icon: 'el-icon-c-scale-to-original',
},
};
const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
export default {
name: 'imageViewer',
props: {
urlList: {
type: Array,
default: () => [],
},
zIndex: {
type: Number,
default: 1111,
},
onSwitch: {
type: Function,
default: () => {},
},
onClose: {
type: Function,
default: () => {},
},
initialIndex: {
type: Number,
default: 0,
},
},
data() {
return {
index: this.initialIndex,
isShow: false,
infinite: true,
loading: false,
mode: Mode.CONTAIN,
transform: {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false,
},
};
},
computed: {
isSingle() {
return this.urlList.length <= 1;
},
isFirst() {
return this.index === 0;
},
isLast() {
return this.index === this.urlList.length - 1;
},
currentImg() {
return this.urlList[this.index];
},
imgStyle() {
const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
const style = {
transform: `scale(${scale}) rotate(${deg}deg)`,
transition: enableTransition ? 'transform .3s' : '',
'margin-left': `${offsetX}px`,
'margin-top': `${offsetY}px`,
};
if (this.mode === Mode.CONTAIN) {
style.maxWidth = style.maxHeight = '100%';
} else {
style.width = style.height = '100%';
}
return style;
},
},
watch: {
index: {
handler: function (val) {
this.reset();
this.onSwitch(val);
},
},
currentImg(val) {
this.$nextTick((_) => {
const $img = this.$refs.img[0];
if (!$img.complete) {
this.loading = true;
}
});
},
},
methods: {
hide() {
this.deviceSupportUninstall();
this.onClose();
},
deviceSupportInstall() {
this._keyDownHandler = rafThrottle((e) => {
const keyCode = e.keyCode;
switch (keyCode) {
// ESC
case 27:
this.hide();
break;
// SPACE
case 32:
this.toggleMode();
break;
// LEFT_ARROW
case 37:
this.prev();
break;
// UP_ARROW
case 38:
this.handleActions('zoomIn');
break;
// RIGHT_ARROW
case 39:
this.next();
break;
// DOWN_ARROW
case 40:
this.handleActions('zoomOut');
break;
}
});
this._mouseWheelHandler = rafThrottle((e) => {
const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
console.log('%c [ 鼠标滑轮： ]-267', 'font-size:13px; background:pink; color:#bf2c9f;', e.wheelDelta, -e.detail)
if (delta > 0) {
this.handleActions('zoomIn', {
zoomRate: 0.015,
enableTransition: false,
});
} else {
this.handleActions('zoomOut', {
zoomRate: 0.015,
enableTransition: false,
});
}
});
on(document, 'keydown', this._keyDownHandler);
on(document, mousewheelEventName, this._mouseWheelHandler);
},
deviceSupportUninstall() {
off(document, 'keydown', this._keyDownHandler);
off(document, mousewheelEventName, this._mouseWheelHandler);
this._keyDownHandler = null;
this._mouseWheelHandler = null;
},
handleImgLoad(e) {
this.loading = false;
},
handleImgError(e) {
this.loading = false;
e.target.alt = '加载失败';
},
handleMouseDown(e) {
console.log(
'%c [图片鼠标点击 ]',
'font-size:13px; background:pink; color:#bf2c9f;',
this.loading,
e.button !== 0,
);
console.log('%c [ 图片移动了]-291', 'font-size:13px; background:pink; color:#bf2c9f;', document);
if (this.loading || e.button !== 0) return;
const { offsetX, offsetY } = this.transform;
const startX = e.pageX;
const startY = e.pageY;
this._dragHandler = rafThrottle((ev) => {
this.transform.offsetX = offsetX + ev.pageX - startX;
this.transform.offsetY = offsetY + ev.pageY - startY;
console.log('%c [ move ]-315', 'font-size:13px; background:pink; color:#bf2c9f;', 'move')
});
// document.addEventListener('mousemove', this._dragHandler, false);
// document.addEventListener('mouseup', (ev) => {
// console.log('%c [鼠标up ]-307', 'font-size:13px; background:pink; color:#bf2c9f;', '鼠标up');
// document.removeEventListener('mousemove', this._dragHandler, false);
// });
on(document, 'mousemove', this._dragHandler);
on(document, 'mouseup', ev => {
off(document, 'mousemove', this._dragHandler);
});
e.preventDefault();
},
reset() {
this.transform = {
scale: 1,
deg: 0,
offsetX: 0,
offsetY: 0,
enableTransition: false,
};
},
toggleMode() {
if (this.loading) return;
const modeNames = Object.keys(Mode);
const modeValues = Object.values(Mode);
const index = modeValues.indexOf(this.mode);
const nextIndex = (index + 1) % modeNames.length;
this.mode = Mode[modeNames[nextIndex]];
this.reset();
},
prev() {
if (this.isFirst && !this.infinite) return;
const len = this.urlList.length;
this.index = (this.index - 1 + len) % len;
},
next() {
if (this.isLast && !this.infinite) return;
const len = this.urlList.length;
this.index = (this.index + 1) % len;
},
handleActions(action, options = {}) {
if (this.loading) return;
const { zoomRate, rotateDeg, enableTransition } = {
zoomRate: 0.2,
rotateDeg: 90,
enableTransition: true,
...options,
};
const { transform } = this;
switch (action) {
case 'zoomOut':
if (transform.scale > 0.2) {
transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
}
break;
case 'zoomIn':
transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
break;
case 'clocelise':
transform.deg += rotateDeg;
break;
case 'anticlocelise':
transform.deg -= rotateDeg;
break;
}
transform.enableTransition = enableTransition;
},
},
mounted() {
this.deviceSupportInstall();
// add tabindex then wrapper can be focusable via Javascript
// focus wrapper so arrow key can't cause inner scroll behavior underneath
this.$refs['el-image-viewer__wrapper'].focus();
},
};
</script>
使用：
<image-viewer v-if="true" :url-list="previewList" />
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
