1、封装的组件
<!-- 放大镜组件 -->
<template>
<div id="container">
<div class="box1">
<img :src="imgUrl" alt="" class="img1">
<div class="yellow"></div>
</div>
<div id="rightbox">
<img :src="imgUrl" alt="" class="img2">
</div>
</div>
</template>
<script>
export default {
name:'ScaleImg',
props:{
imgUrl:{
type: String,
default: ''
},
magnification:{
type: Number,
default: 2
},
width:{
type: String,
default: ''
},
height:{
type: String,
default: ''
},
screenBoxWidth:{
type: String,
default: ''
},
screenBoxHeight:{
type: String,
default: ''
},
screenBoxPosition:{
type: Object
}
},
data () {
return {
};
},
components: {},
computed: {},
mounted() {
this.scale()
},
methods: {
scale(){
if(this.imgUrl){
var box1=document.querySelector('.box1')
var yellow=document.querySelector('.yellow')
var box2=document.querySelector('#rightbox')
var srceen=document.querySelector('.img2')
if(this.width && this.height){
box1.style.width = this.width + 'px'
box1.style.height = this.height + 'px'
if(JSON.stringify(this.screenBoxPosition)!='{}'){
box2.style.left = this.screenBoxPosition.left + 'px'
box2.style.top = (this.screenBoxPosition.top + 'px') || '0px'
}else{
box2.style.left = (parseInt(this.width) + 150) + 'px'
}
//展示盒子大小
if(this.screenBoxWidth || this.screenBoxHeight){
box2.style.width = this.screenBoxWidth + 'px'
box2.style.height = this.screenBoxHeight + 'px'
}else{
box2.style.width = this.width + 'px'
box2.style.height = this.height + 'px'
}
if(this.magnification){
srceen.style.width = (this.width * this.magnification) + 'px'
srceen.style.height = (this.height * this.magnification) + 'px'
}
}
box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}
// 鼠标在图片上移动触发事件
box1.onmousemove=function(e){
// 算出小盒子在图片的中心点
var x=e.clientX-box1.getBoundingClientRect().left-yellow.offsetWidth/2
var y=e.clientY-box1.getBoundingClientRect().top-yellow.offsetHeight/2
//判断小盒子是否超出img范围,使黄色小盒子不能超出img范围
if(x<0){
// 此时的0不是图片的左侧,而是小盒子在最左边时,小盒子的中心点
x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// 小盒子的X轴中心点大于图片盒子的宽度减去自身宽度时,说明超出,则始终等于图片盒子的宽度减去自身宽度
x=box1.offsetWidth-yellow.offsetWidth
}
if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// 给黄色小盒子赋值,让黄色小盒子跟随鼠标移动
yellow.style.left=x+'px'
yellow.style.top=y+'px'
// 通过计算,得出小盒子在图片移动多少,显示区就移动多少的比例,(反方向移动)
srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
// 黄色小盒子自适应(可以自己设定,根据图片比例就行)
yellow.style.width= (box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth))+'px'
yellow.style.height= (box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight))+'px'
}
}
}
}
}
</script>
<style lang='scss' scoped>
*{
padding: 0;
margin: 0;
}
#container{
position: relative;
}
.img1{
width: 200px;
height: 200px;
}
.img2{
width: 100px;
height: 400px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 400px;
width: 200px;
height: 200px;
overflow: hidden;
display: none;
}
.yellow{
background-color: yellow;
opacity: 0.5;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
.box1{
width: 200px;
height: 200px;
position: relative;
}
</style>
2、使用
3、参数介绍