vue放大缩小div_vue 快速给图片添加，点击旋转、放大、缩小、拖动的效果

:style="{transform:'scale('+multiples+')',transformOrigin:'top left'}">

alt=""

:style="{transform:'rotateZ('+deg+'deg)'}">

放大

缩小

旋转

export default{

data(){

return{

imgSrc:'https://publish-pic-cpu.baidu.com/cf60d547-a35c-4e77-8ef3-30d0e5b0e48b.jpeg@q_90,w_450',

deg:0,

multiples:1,

}

},

methods:{

// 放大

magnify(){

if(this.multiples >= 3){

return

}

this.multiples += 0.25

},

// 缩小

shrink(){

if(this.multiples <= 0.5){

return

}

this.multiples -= 0.25

},

// 旋转

rotate(){

this.deg += 90;

if(this.deg >= 360){

this.deg = 0

}

},

}

}

.outer_box{

width: 200px;

height: 200px;

}

.outer_box>div{

white-space: nowrap;

display: inline-block;

}

.outer_box>div>img{

width: auto;

height: auto;

position: absolute;

}

可以看到现在的图片，已经具备放大缩小及旋转的功能了，但是这个方法会造成图片的遮挡，所以还需要做一个拖动图片的功能

在main.js里面全局定义一个拖动指令，也可在局部定义。

//自定义拖动

Vue.directive('drag',

function (el, binding) {

let oDiv = el; //当前元素

oDiv.onmousedown = function (e) {

e.preventDefault();

let bw = document.body.clientWidth;

let bh = document.body.clientHeight;

//鼠标按下，计算当前元素距离可视区的距离

let disX = e.clientX - oDiv.offsetLeft;

let disY = e.clientY - oDiv.offsetTop;

// 计算两边坐标

document.onmousemove = function (e) {

let l = 0, t = 0;

// 拖动边界

if (e.clientX >= bw) {

l = bw - disX;

} else if (e.clientX <= 0) {

{

l = 0- disX;

}

} else {

l = e.clientX - disX;

}

if (e.clientY >= bh) {

t = bh - disY;

}else if(e.clientY <= 0) {

t = 0- disY;

}

else {

t = e.clientY - disY;

}

//移动当前元素

oDiv.style.left = l + 'px';

oDiv.style.top = t + 'px';

};

// 鼠标停止移动时，事件移除

document.onmouseup = function (e) {

document.onmousemove = null;

document.onmouseup = null;

};

};

}

);

最后给当前图片的元素加上v-drag，以及position: absolute;的样式，图片就能正常的拖动了

:style="{transform:'rotateZ('+deg+'deg)'}"

v-drag>