:style="{transform:'scale('+multiples+')',transformOrigin:'top left'}">
alt=""
:style="{transform:'rotateZ('+deg+'deg)'}">
放大
缩小
旋转
export default{
data(){
return{
imgSrc:'https://publish-pic-/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>
