目录
zoom组件
<template>
<div class="pic-img">
<div class="img-container">
<img ref="img" @load="imgLoaded" :src="url" :style="overlayStyle" @error="imgerrorfun"/>
<div class="overlay"
@mousemove.stop="!moveEvent && mouseMove($event)"
@mouseout.stop="!leaveEvent && mouseLeave($event)"
:style="overlayStyle"></div>
<div
v-if="!hideZoom && imgLoadedFlag &&!hideSelector"
:class="['img-selector', {'circle': type === 'circle'}]"
:style="[imgSelectorStyle, imgSelectorSize, imgSelectorPosition, !outShow && imgBg, !outShow && imgBgSize, !outShow && imgBgPosition]">
<slot></slot>
</div>
<div
v-if="outShow"
v-show="!hideOutShow"
:class="['img-out-show', {'base-line': baseline}]"
:style="[imgOutShowSize, imgOutShowPosition, imgBg, imgBgSize, imgBgPosition]">
<div v-if="pointer" class="img-selector-point"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "vue-photo-zoom-pro",
props: {
url: { type: String, default: require('@/assets/images/default-zoom.jpg') }, // 图片地址
highUrl: String, // 更清晰的图片,若不提供会采用 url
width: { type: Number, default: 168 }, // 内部放大区域宽度
type: { type: String, default: "square", validator: function(value) { return ["circle", "square"].indexOf(value) !== -1 } },
selectorStyle: { type: Object, default() { return {} } },
outShowStyle: {},
scale: { type: Number, default: 3 }, // 放大倍数
moveEvent: { type: [Object, MouseEvent], default: null }, // 当需要在外部监听移动事件时,请通过该字段传入事件(必须包含 pageX,pageY,clientY),这将禁用内部移动监听
leaveEvent: { type: [Object, MouseEvent], default: null }, // 当需要在外部监听离开事件时,请通过该字段传入事件
hideZoom: { type: Boolean, default: false }, // 隐藏放大镜
outShow: { type: Boolean, default: false }, // 是否外置放大镜
pointer: { type: Boolean, default: false }, // 外部区域的中心点
baseline: { type: Boolean, default: false }, // 外部区域的基线
overlayStyle:{ type: String, default: 'width:100%;height:100%' },
},
computed: {
addWidth() { return !this.outShow ? (this.width / 2) * (1 - this.scale) : 0 },
imgSelectorPosition() {
let { top, left } = this.selector;
return { top: `${top}px`, left: `${left}px` };
},
imgSelectorSize() {
let width = this.selector.width;
return { width: `${width}px`, height: `${width}px` };
},
imgSelectorStyle() {
return this.selectorStyle;
},
imgOutShowSize() {
let { scale, selector: { width } } = this;
return { width: `${width * scale}px`, height: `${width * scale}px` };
},
imgOutShowPosition() {
return { top: `${this.outShowTop}px`, right: `${-8}px` };
},
imgBg() {
return { backgroundImage: `url(${this.highUrl || this.url})` };
},
imgBgSize() {
let { scale, imgInfo: { height, width } } = this;
return { backgroundSize: `${width * scale}px ${height * scale}px` };
},
imgBgPosition() {
let { bgLeft, bgTop } = this.selector;
return { backgroundPosition: `${bgLeft}px ${bgTop}px` };
},
},
data() {
return {
selector: {
width: this.width,
top: 0,
left: 0,
bgTop: 0,
bgLeft: 0,
rightBound: 0,
bottomBound: 0,
absoluteLeft: 0,
absoluteTop: 0
},
imgInfo: {},
$img: null,
screenWidth: document.body.clientWidth,
outShowInitTop: 0,
outShowTop: 0,
hideOutShow: true,
imgLoadedFlag: false,
hideSelector: false,
timer: null
};
},
methods: {
imgLoaded() {
let imgInfo = this.$img.getBoundingClientRect();
if (JSON.stringify(this.imgInfo) != JSON.stringify(imgInfo)) {
this.imgInfo = imgInfo;
this.initSelectorProperty(this.width);
this.resetOutShowInitPosition();
}
if (!this.imgLoadedFlag) {
this.imgLoadedFlag = true;
this.$emit("created", imgInfo);
}
},
mouseMove(e) {
if (!this.hideZoom && this.imgLoadedFlag) {
this.imgLoaded();
const { pageX, pageY, clientY } = e;
const { scale, selector, outShow, addWidth, outShowAutoScroll } = this;
let { outShowInitTop } = this;
const scrollTop = pageY - clientY;
const { absoluteLeft, absoluteTop, rightBound, bottomBound } = selector;
const x = pageX - absoluteLeft; // 选择器的x坐标 相对于图片
const y = pageY - absoluteTop; // 选择器的y坐标
if (outShow) {
if (!outShowInitTop) {
outShowInitTop = this.outShowInitTop = scrollTop + this.imgInfo.top;
}
this.hideOutShow && (this.hideOutShow = false);
this.outShowTop =
scrollTop > outShowInitTop ? scrollTop - outShowInitTop : 0;
}
this.hideSelector && (this.hideSelector = false);
selector.top = y > 0 ? (y < bottomBound ? y : bottomBound) : 0;
selector.left = x > 0 ? (x < rightBound ? x : rightBound) : 0;
selector.bgLeft = addWidth - x * scale; // 选择器图片的坐标位置
selector.bgTop = addWidth - y * scale;
}
},
initSelectorProperty(selectorWidth) {
const selectorHalfWidth = selectorWidth / 2;
const selector = this.selector;
const { width, height, left, top } = this.imgInfo;
const { scrollLeft, scrollTop } = document.documentElement;
selector.width = selectorWidth;
selector.rightBound = width - selectorWidth;
selector.bottomBound = height - selectorWidth;
selector.absoluteLeft = left + selectorHalfWidth + scrollLeft;
selector.absoluteTop = top + selectorHalfWidth + scrollTop;
},
mouseLeave() {
this.hideSelector = true;
if (this.outShow) {
this.hideOutShow = true;
}
},
reset() {
Object.assign(this.selector, {
top: 0,
left: 0,
bgLeft: 0,
bgTop: 0
});
this.resetOutShowInitPosition();
},
resetOutShowInitPosition() {
this.outShowInitTop = 0;
},
imgerrorfun(e){
// let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
// this.url = img
// e.target.src = img
// e.target.οnerrοr= null
}
},
watch: {
moveEvent(e) {
this.mouseMove(e);
},
leaveEvent(e) {
this.mouseLeave(e);
},
url(n) {
this.imgLoadedFlag = false;
// let img = require('@/assets/vehicle_img/blank_vehicle.jpg')
// if(n == img){
// this.outShow = false
// }
},
width(n) {
this.initSelectorProperty(n);
},
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val;
this.timer = setTimeout(() => {
this.imgLoaded();
clearTimeout(this.timer);
this.timer = null;
}, 400);
}
}
},
mounted() {
this.$img = this.$refs["img"];
},
};
</script>
<style scoped>
.img-container {
position: relative;
}
.overlay{
cursor: crosshair;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
z-index: 3;
}
.img-selector {
position: absolute;
cursor: crosshair;
border: 1px solid rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
background-color: rgba(64, 64, 64, 0.6);
}
.img-selector.circle {
border-radius: 50%;
}
.img-out-show {
z-index: 5000;
position: absolute;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-color: white;
transform: translate(100%, 0);
}
.img-selector-point {
position: absolute;
width: 4px;
height: 4px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
}
.img-out-show.base-line::after {
position: absolute;
box-sizing: border-box;
content: "";
width: 1px;
border: 1px dashed rgba(0, 0, 0, 0.36);
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.img-out-show.base-line::before {
position: absolute;
box-sizing: border-box;
content: "";
height: 1px;
border: 1px dashed rgba(0, 0, 0, 0.36);
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
</style>
<template>
<div class='wrapper'>
<div class='box'>
<!-- <pic-zoom
:url="storageUrl"
:bigWidth="150"
:scale="3"
overlayStyle="width: 100%;height: 400px;border-radius: 3px;"></pic-zoom> -->
<pic-zoom
:width="150"
:url="url"
:scale="3"
type="square"
:pointer="true"
:out-show="true"
overlayStyle="width: 100%;height: 100%;"></pic-zoom>
</div>
</div>
</template>
<script>
import PicZoom from '@/components/PicZoom'
export default {
components: { PicZoom },
data() {
return {
url: 'https://bpic.588ku.com/illus_water_img/18/08/18/472f21d353b64c95b9994be6ed3b7274.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true',
}
},
}
</script>
<style lang='scss' scoped>
.box {
width: 400px;
height: 400px;
}
</style>