first
This commit is contained in:
Ivan
8
packages/image/index.js
Normal file
8
packages/image/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import Image from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Image.install = function(Vue) {
|
||||
Vue.component(Image.name, Image);
|
||||
};
|
||||
|
||||
export default Image;
|
||||
324
packages/image/src/image-viewer.vue
Normal file
324
packages/image/src/image-viewer.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<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.self="handleMaskClick"></div>
|
||||
<!-- CLOSE -->
|
||||
<span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
|
||||
<i class="el-icon-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 { on, off } from 'element-ui/src/utils/dom';
|
||||
import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
|
||||
|
||||
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: 2000
|
||||
},
|
||||
onSwitch: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
},
|
||||
initialIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
appendToBody: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
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%';
|
||||
}
|
||||
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();
|
||||
},
|
||||
handleMaskClick() {
|
||||
if (this.maskClosable) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
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();
|
||||
if (this.appendToBody) {
|
||||
document.body.appendChild(this.$el);
|
||||
}
|
||||
// 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();
|
||||
},
|
||||
destroyed() {
|
||||
// if appendToBody is true, remove DOM node after destroy
|
||||
if (this.appendToBody && this.$el && this.$el.parentNode) {
|
||||
this.$el.parentNode.removeChild(this.$el);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
242
packages/image/src/main.vue
Normal file
242
packages/image/src/main.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="el-image">
|
||||
<slot v-if="loading" name="placeholder">
|
||||
<div class="el-image__placeholder"></div>
|
||||
</slot>
|
||||
<slot v-else-if="error" name="error">
|
||||
<div class="el-image__error">{{ t('el.image.error') }}</div>
|
||||
</slot>
|
||||
<img
|
||||
v-else
|
||||
class="el-image__inner"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
@click="clickHandler"
|
||||
:src="src"
|
||||
:style="imageStyle"
|
||||
:class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
|
||||
<template v-if="preview">
|
||||
<image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImageViewer from './image-viewer';
|
||||
import Locale from 'element-ui/src/mixins/locale';
|
||||
import { on, off, getScrollContainer, isInContainer } from 'element-ui/src/utils/dom';
|
||||
import { isString, isHtmlElement } from 'element-ui/src/utils/types';
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
|
||||
const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
|
||||
|
||||
const ObjectFit = {
|
||||
NONE: 'none',
|
||||
CONTAIN: 'contain',
|
||||
COVER: 'cover',
|
||||
FILL: 'fill',
|
||||
SCALE_DOWN: 'scale-down'
|
||||
};
|
||||
|
||||
let prevOverflow = '';
|
||||
|
||||
export default {
|
||||
name: 'ElImage',
|
||||
|
||||
mixins: [Locale],
|
||||
inheritAttrs: false,
|
||||
|
||||
components: {
|
||||
ImageViewer
|
||||
},
|
||||
|
||||
props: {
|
||||
src: String,
|
||||
fit: String,
|
||||
lazy: Boolean,
|
||||
scrollContainer: {},
|
||||
previewSrcList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
error: false,
|
||||
show: !this.lazy,
|
||||
imageWidth: 0,
|
||||
imageHeight: 0,
|
||||
showViewer: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
imageStyle() {
|
||||
const { fit } = this;
|
||||
if (!this.$isServer && fit) {
|
||||
return isSupportObjectFit()
|
||||
? { 'object-fit': fit }
|
||||
: this.getImageStyle(fit);
|
||||
}
|
||||
return {};
|
||||
},
|
||||
alignCenter() {
|
||||
return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
|
||||
},
|
||||
preview() {
|
||||
const { previewSrcList } = this;
|
||||
return Array.isArray(previewSrcList) && previewSrcList.length > 0;
|
||||
},
|
||||
imageIndex() {
|
||||
let previewIndex = 0;
|
||||
const srcIndex = this.previewSrcList.indexOf(this.src);
|
||||
if (srcIndex >= 0) {
|
||||
previewIndex = srcIndex;
|
||||
}
|
||||
return previewIndex;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
src(val) {
|
||||
this.show && this.loadImage();
|
||||
},
|
||||
show(val) {
|
||||
val && this.loadImage();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.lazy) {
|
||||
this.addLazyLoadListener();
|
||||
} else {
|
||||
this.loadImage();
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.lazy && this.removeLazyLoadListener();
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadImage() {
|
||||
if (this.$isServer) return;
|
||||
|
||||
// reset status
|
||||
this.loading = true;
|
||||
this.error = false;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = e => this.handleLoad(e, img);
|
||||
img.onerror = this.handleError.bind(this);
|
||||
|
||||
// bind html attrs
|
||||
// so it can behave consistently
|
||||
Object.keys(this.$attrs)
|
||||
.forEach((key) => {
|
||||
const value = this.$attrs[key];
|
||||
img.setAttribute(key, value);
|
||||
});
|
||||
img.src = this.src;
|
||||
},
|
||||
handleLoad(e, img) {
|
||||
this.imageWidth = img.width;
|
||||
this.imageHeight = img.height;
|
||||
this.loading = false;
|
||||
this.error = false;
|
||||
},
|
||||
handleError(e) {
|
||||
this.loading = false;
|
||||
this.error = true;
|
||||
this.$emit('error', e);
|
||||
},
|
||||
handleLazyLoad() {
|
||||
if (isInContainer(this.$el, this._scrollContainer)) {
|
||||
this.show = true;
|
||||
this.removeLazyLoadListener();
|
||||
}
|
||||
},
|
||||
addLazyLoadListener() {
|
||||
if (this.$isServer) return;
|
||||
|
||||
const { scrollContainer } = this;
|
||||
let _scrollContainer = null;
|
||||
|
||||
if (isHtmlElement(scrollContainer)) {
|
||||
_scrollContainer = scrollContainer;
|
||||
} else if (isString(scrollContainer)) {
|
||||
_scrollContainer = document.querySelector(scrollContainer);
|
||||
} else {
|
||||
_scrollContainer = getScrollContainer(this.$el);
|
||||
}
|
||||
|
||||
if (_scrollContainer) {
|
||||
this._scrollContainer = _scrollContainer;
|
||||
this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
|
||||
on(_scrollContainer, 'scroll', this._lazyLoadHandler);
|
||||
this.handleLazyLoad();
|
||||
}
|
||||
},
|
||||
removeLazyLoadListener() {
|
||||
const { _scrollContainer, _lazyLoadHandler } = this;
|
||||
|
||||
if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
|
||||
|
||||
off(_scrollContainer, 'scroll', _lazyLoadHandler);
|
||||
this._scrollContainer = null;
|
||||
this._lazyLoadHandler = null;
|
||||
},
|
||||
/**
|
||||
* simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
|
||||
*/
|
||||
getImageStyle(fit) {
|
||||
const { imageWidth, imageHeight } = this;
|
||||
const {
|
||||
clientWidth: containerWidth,
|
||||
clientHeight: containerHeight
|
||||
} = this.$el;
|
||||
|
||||
if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
|
||||
|
||||
const imageAspectRatio = imageWidth / imageHeight;
|
||||
const containerAspectRatio = containerWidth / containerHeight;
|
||||
|
||||
if (fit === ObjectFit.SCALE_DOWN) {
|
||||
const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
|
||||
fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
|
||||
}
|
||||
|
||||
switch (fit) {
|
||||
case ObjectFit.NONE:
|
||||
return { width: 'auto', height: 'auto' };
|
||||
case ObjectFit.CONTAIN:
|
||||
return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
|
||||
case ObjectFit.COVER:
|
||||
return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
clickHandler() {
|
||||
// don't show viewer when preview is false
|
||||
if (!this.preview) {
|
||||
return;
|
||||
}
|
||||
// prevent body scroll
|
||||
prevOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
this.showViewer = true;
|
||||
},
|
||||
closeViewer() {
|
||||
document.body.style.overflow = prevOverflow;
|
||||
this.showViewer = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user