1.废话不多说先上代码 ( ImgPreviewer.vue)
<template>
<transition enter-active-class="animate__animated animate__fadeIn" :duration='{enter:1000,leaver:200}'>
<div class="fullimg" v-show="url" @mousewheel="zoomImg($event)">
<img :src="url" alt="" ref="viewImg" @drag="drag($event)">
<-- —<el-button type="primary" class="el-icon-close" circle @click="closeViewImg"></el-button>-->
<button class="el-icon-close" @click="closeViewImg">关闭</button>
</div>
</transition>
</template>
<script>
export default {
props: {
url: {
type: String,
default: ''
}
},
created() {
},
mounted(){
var imgView = this.$refs.viewImg
imgView.onmousedown = function (e) {
//鼠标和元素左上右上
var offsetX = e.offsetX;
var offsetY = e.offsetY;
var translateX=this.offsetWidth/2
var translateY=this.offsetHeight/2
e.preventDefault()
//添加onmousemove
document.onmousemove = function (e) {
e = e || window.event;
//视口
var clientX = e.clientX;
var clientY = e.clientY;
imgView.style.top = (clientY-offsetY+translateY ) + 'px'
imgView.style.left = (clientX-offsetX+translateX)+ 'px'
}
};
imgView.onmouseup = function () {
//鼠标松开，停
document.onmousemove = null;
}
imgView.onmouseleave = function () {
document.onmousemove = null;
}
}
},
methods: {
closeViewImg() {
this.$emit("update:url", "")
this.$emit("onclose")
document.onmousemove = null;
var imgView = this.$refs.viewImg
imgView.style.left='50%'
imgView.style.top='50%'
imgView.removeAttribute("height")
},
zoomImg(e) {
console.log(e);
if (e.wheelDelta > 0) {
e.target.height = e.target.height + 100
} else {
e.target.height = e.target.height - 100 < 100 ? 100 : e.target.height - 100
}
e.cancelBubble = true,
e.preventDefault();
},
drag(e) {
var img = this.$refs.viewImg
console.log(e.clientX, e.offsetX)
e.x > 0 && (img.style.left = e.clientX - e.offsetX + "px")
e.y > 0 && (img.style.top = e.clientY - e.offsetY + "px")
e.preventDefault()
},
},
,beforeDistroy(){
var imgView = this.$refs.viewImg
imgView.onmousedown =null
imgView.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<style lang=scss>
.fullimg {
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(10, 10, 10, 0.452);
z-index: 1000;
overflow: hidden;
img {
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 0 10px gray;
transform: translate(-50%, -50%);
cursor: pointer;
&:active {
cursor: move;
}
}
.el-icon-close {
position: absolute;
right: 20px;
top: 20px;
font-size: 20px;
}
}
</style>
2.使用：
<img-previewer :url.sync="viewImgurl" />
//有url时就展示
3.亮点
可实现单张图片的预览放大、拖拽 简单好用
