自己vue项目中用到的 一个类似于windows照片查看器的功能 不使用插件
这里的核心代码是从插件中扒下来的 因为插件有点不符合我自己的使用要求 这里记录一下
//因为我这里是vue项目 图片查看是一个单独的组件 所以我把图片在组件中的移动写成了一个指令 指令代码也是插件里扒出来的哈
//如果需要全屏或者双击全屏的时候 vm.setImageSize(vm.img); 加上这句代码在操作之后
Vue.directive('dragz',function(el,binding,vnode){
//图片放大移动的指令
let oDiv = el;
let isDragging = false;
let startX = 0,
startY = 0,
left = 0,
top = 0,
widthDiff = 0,
heightDiff = 0,
δ = 0;
//计算出盒子的大小和图片的大小
oDiv.onmousedown = function(e){
e.preventDefault();
let imageWidth = el.clientWidth;
let imageHeight = el.clientHeight;
let stageWidth = el.parentNode.clientWidth;
let stageHeight = el.parentNode.clientHeight;
startX = e.type === 'mousedown' ? e.pageX : e.clientX;
startY = e.type === 'mousedown' ? e.pageY : e.clientY;
// δ是图像宽度和高度之间的差异
δ = 0;
widthDiff = imageWidth - stageWidth;
heightDiff = imageHeight - stageHeight;
isDragging = widthDiff > 0 || heightDiff > 0;
left = oDiv.offsetLeft - δ;
top = oDiv.offsetTop + δ;
document.onmousemove = function(e){
let endX =
e.type === 'mousemove' ? e.pageX : e.clientX,
endY = e.type === 'mousemove' ? e.pageY : e.clientY,
relativeX = endX - startX,
relativeY = endY - startY,
newLeft = relativeX + left,
newTop = relativeY + top;
//垂直限制
if(heightDiff > 0){
if(relativeY + top > δ){
newTop = δ;
}else if(relativeY + top < -heightDiff + δ){
newTop = -heightDiff + δ;
}
}else{
newTop = top;
}
//水平限制
if(widthDiff > 0){
if(relativeX + left > -δ){
newLeft = -δ;
}else if(relativeX + left < -widthDiff - δ){
newLeft = -widthDiff - δ;
}
}else