问题:用户提出要求放大显示图片之后 移动图片到指定位置 要求点击下一张之后固定图片
在原有的组件上改了半天 没成功 然后自己仿照el-image修改了一下
组件
<template>
<div>
<img class="showImage" :src="url" alt="" @click="handleClick(url)" />
<div
class="el-image-viewer__wrapper"
v-if="isshowMaak"
ref="Mask"
style="z-index:99999;"
>
<div class="mask" @click="handleClickMask"></div>
<span
class="el-image-viewer__close el-image-viewer__btn"
@click="isshowMaak = false"
>
<i class="el-icon-close"></i>
</span>
<span
class="el-image-viewer__next el-image-viewer__btn"
@click="handleNext"
>
<i class="el-icon-arrow-right"></i>
</span>
<span
class="el-image-viewer__prev el-image-viewer__btn"
@click="handlePre"
>
<i class="el-icon-arrow-left"></i>
</span>
<div class="el-image-viewer__btn el-image-viewer__actions">
<div class="el-image-viewer__actions__inner">
<i class="el-icon-zoom-out" @click="handleReduce"></i>
<i class="el-icon-zoom-in" @click="handleAdd"></i>
<i class="el-image-viewer__actions__divider"></i>
<i class="el-icon-full-screen" @click="scale = 1"></i>
<i class="el-image-viewer__actions__divider"></i>
<i class="el-icon-refresh-left" @click="rotate += 90"></i>
<i class="el-icon-refresh-right" @click="rotate -= 90"></i>
</div>
</div>
<div class="el-image-viewer__canvas">
<img
ref="singleMvIndex"
@mousedown="move($event)"
:style="{
'--scale': scale,
'--rotatedeg': rotatedeg,
'--MoveLeft': MoveLeft,
'--MoveTop': MoveTop
}"
class="imgStyle"
v-for="(item, index) in srcList"
v-if="currentIndex === index"
:key="index"
:src="item"
alt=""
/>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['url', 'srcList'],
data() {
return {
imgObj: null,
MoveL: 0,
MoveT: 0,
rotate: 0,
marginL: 0,
marginT: 0,
scale: 1,
cssText: '',
client: null,
image: null,
imgWrap: null,
scale: 1,
currentIndex: 0,
isshowMaak: false
}
},
computed: {
marginLeft() {
return `${this.marginL}px`
},
marginTop() {
return `${this.marginT}px`
},
rotatedeg() {
return `${this.rotate}deg`
},
MoveLeft() {
return `${this.MoveL}px`
},
MoveTop() {
return `${this.MoveT}px`
}
},
mounted() {},
methods: {
move(image) {
const el = image.target
image.preventDefault()
// 获取鼠标到图片的距离
let x = image.clientX - el.offsetLeft
let y = image.clientY - el.offsetTop
// console.log(x,y)
document.onmousemove = e => {
// 拼图随鼠标移动
let eX = e.clientX - x
const eY = e.clientY - y
console.log(eX)
console.log(eY)
this.MoveL = eX
this.MoveT = eY
}
document.onmouseup = e => {
// 移动结束时的操作
document.onmousemove = null
document.onmouseup = null
}
},
handleAdd() {
if (this.scale < 1) {
this.scale = this.scale + 0.25
}
},
handleReduce() {
if (this.scale > 0.25) {
this.scale = this.scale - 0.25
}
},
handleNext() {
// 先得到当前的数组长度 最大可显示照片的索引就是count - 1
const count = this.srcList.length
if (this.currentIndex < count - 1) {
this.currentIndex++
} else {
this.currentIndex = 0
}
this.$nextTick(() => {
if (this.cssText) {
this.$refs.imgViewer[0].style.cssText = this.cssText
}
})
},
handlePre() {
console.log(this.currentIndex)
// 先得到当前的数组长度 最小可显示照片的索引0 等于0 显示最后一张照片
const count = this.srcList.length
if (this.currentIndex === 0) {
this.currentIndex = count - 1
} else {
this.currentIndex--
}
console.log(this.currentIndex)
},
handleClick(url) {
this.MoveL = 0
this.MoveT = 0
this.rotate = 0
this.marginL = 0
this.marginT = 0
this.scale = 1
// 得到当前应该显示的照片索引
this.currentIndex = this.srcList.findIndex(item => item == this.url)
console.log(this.currentIndex)
this.isshowMaak = true
},
handleClickMask() {
this.isshowMaak = false
}
}
}
</script>
<style scoped>
.showImage {
height: 35px;
width: 35px;
}
.imgStyle {
position: absolute;
left: var(--MoveLeft);
top: var(--MoveTop);
z-index: 1;
transform: scale(var(--scale)) rotate(var(--rotatedeg));
width: 500px;
}
.el-image-viewer__btn {
position: absolute;
z-index: 2;
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__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;
}
/deep/.el-image-viewer__actions {
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
border-radius: 22px;
}
.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__close {
top: 40px;
right: 40px;
width: 40px;
height: 40px;
font-size: 24px;
color: #fff;
background-color: #606266;
}
.el-image-viewer__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
background: #000;
}
/* .el-image-viewer__canvas {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
} */
</style>
使用
<template>
<showPhotoDialog
:url="url"
:srcList="srcList"
></showPhotoDialog>
</template>
<script>
export default {
data(){
return{
srcList1:[],
url:''
}
}
}
</script>
<style></style>