需求：
点击小图可以放大，放大后，通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。
代码
父组件：
<template><div><el-image-viewer v-if="showImg" :on-close="closeViewer" :src="currItem" :url-list="baseInfo.pictureUrlList"/><div class="baseBoxPic"> <div v-for="(item, index) in baseInfo.pictureUrlList" :key="index" class="picBox"> <img :src="item" class="litPic" @click="bigImg(item)"/> </div> </div></div></template><script>import ElImageViewer from 'base/image/image-viewer'export default {data() {return {baseInfo: {pictureUrlList: []},showImg: false, currItem: ''}},components: { 'ElImageViewer': ElImageViewer }, methods: { // 放大 bigImg(e) { this.currItem = e this.showImg = true }, // 关闭 closeViewer() { this.showImg = false }, }}</script>子组件
base/image/image-viewer.vue
<template> <transition name="viewer-fade"> <div class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }"> <div class="el-image-viewer__mask"></div> <span class="el-image-viewer__btn el-image-viewer__close" @click="hide"> <i class="el-icon-circle-close"></i> </span> <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> <div class="el-image-viewer__btn el-image-viewer__actions"> <div class="el-image-viewer__actions__inner"> <i class="el-icon-zoom-out" style="margin-right: 10px;" @click="handleActions('zoomOut')"></i> <i class="el-icon-zoom-in" style="margin-right: 10px;" @click="handleActions('zoomIn')"></i> <i class="el-icon-refresh" @click="handleActions('clocelise')"></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> <div class="el-image-viewer__canvas"> <div v-for="(url, i) in urlList" v-if="i === index"> <div v-if="isPdf"> <a target="_blank" :href="currentImg" style="color: #fff; position: absolute;left: 50%; top: 50%">点击新页面查看</a> </div> <img v-else ref="img" class="el-image-viewer__img" :key="url" :src="currentImg" :style="imgStyle" @load="handleImgLoad" @error="handleImgError" @mousedown="handleMouseDown"> </div> </div> </div> </transition></template><script>import { on, off } from './dom';import { rafThrottle, isFirefox } from './util';import pdf from 'vue-pdf'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: 'elImageViewer', props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2300 }, onSwitch: { type: Function, default: () => { } }, onClose: { type: Function, default: () => { } } }, data () { return { index: 0, isShow: false, infinite: true, loading: false, mode: Mode.CONTAIN, transform: { scale: 1, deg: 0, offsetX: 0, offsetY: 0, enableTransition: false } }; }, components: { pdf }, computed: { isSingle () { return this.urlList.length <= 1; }, isFirst () { return this.index === 0; }, isLast () { return this.index === this.urlList.length - 1; }, isPdf() { return this.urlList[this.index] && this.urlList[this.index].toString().indexOf('.pdf') !== -1; }, currentImg () { return this.urlList[this.index] }, isPdf() { return this.urlList[this.index] && this.urlList[this.index].toString().indexOf('.pdf')!== -1; }, 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%'; } 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; 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) { 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; }); 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(); }};</script><style scoped>.el-image__error,.el-image__inner,.el-image__placeholder { width: 100%; height: 100%;}.el-image { position: relative; display: inline-block; overflow: hidden;}.el-image__inner { vertical-align: top;}.el-image__inner--center { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}.el-image__error,.el-image__placeholder { background: #f5f7fa;}.el-image__error { display: flex; justify-content: center; align-items: center; font-size: 14px; color: #c0c4cc; vertical-align: middle;}.el-image__preview { cursor: pointer;}.el-image-viewer__wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.el-image-viewer__btn { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0.8; cursor: pointer; box-sizing: border-box; user-select: none;}.el-image-viewer__close { top: 40px; right: 40px; width: 40px; height: 40px; font-size: 40px;}.el-image-viewer__canvas { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.el-image-viewer__actions { left: 50%; bottom: 30px; transform: translateX(-50%); width: 100px; height: 44px; padding: 0 23px; background-color: #606266; border-color: #fff; border-radius: 22px;}.el-image-viewer__actions__inner { width: 100%; height: 100%; text-align: justify; cursor: default; font-size: 23px; color: #fff; display: flex; align-items: center; justify-content: space-around;}.el-image-viewer__prev { left: 40px;}.el-image-viewer__next,.el-image-viewer__prev { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 24px; color: #fff; background-color: #606266; border-color: #fff;}.el-image-viewer__next { right: 40px; text-indent: 2px;}.el-image-viewer__mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; background: #000;}.viewer-fade-enter-active { animation: viewer-fade-in 0.3s;}.viewer-fade-leave-active { animation: viewer-fade-out 0.3s;}@keyframes viewer-fade-in { 0% { transform: translate3d(0, -20px, 0); opacity: 0; } to { transform: translateZ(0); opacity: 1; }}@keyframes viewer-fade-out { 0% { transform: translateZ(0); opacity: 1; } to { transform: translate3d(0, -20px, 0); opacity: 0; }}</style>dom.js
/* istanbul ignore next */import Vue from 'vue';const isServer = Vue.prototype.$isServer;const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;const MOZ_HACK_REGEXP = /^moz([A-Z])/;const ieVersion = isServer ? 0 : Number(document.documentMode);/* istanbul ignore next */export const on = (function () { if (!isServer && document.addEventListener) { return function (element, event, handler) { if (element && event && handler) { element.addEventListener(event, handler, false); } }; } else { return function (element, event, handler) { if (element && event && handler) { element.attachEvent('on' + event, handler); } }; }})();/* istanbul ignore next */export const off = (function () { if (!isServer && document.removeEventListener) { 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); } }; }})();/util.js
import Vue from 'vue';import { isString, isObject} from './types';const hasOwnProperty = Object.prototype.hasOwnProperty;export const isFirefox = function () { return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);};export const autoprefixer = function (style) { if (typeof style !== 'object') return style; const rules = ['transform', 'transition', 'animation']; const prefixes = ['ms-', 'webkit-']; rules.forEach(rule => { const value = style[rule]; if (rule && value) { prefixes.forEach(prefix => { style[prefix + rule] = value; }); } }); return style;};export function rafThrottle(fn) { let locked = false; return function (...args) { if (locked) return; locked = true; window.requestAnimationFrame(_ => { fn.apply(this, args); locked = false; }); };}/types.js
export function isString(obj) { return Object.prototype.toString.call(obj) === '[object String]';}export function isObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]';}