vue可以变化大小移动的按钮
先看效果在贴代码
代码,我觉得注释挺全的,就不讲解了,有问题私聊留言皆可
<template>
<div id="vue" >
<div id="d1" @mousedown="change('sw')" ></div>
<div id="d2" @mousedown="change('s')" ></div>
<div id="d3" @mousedown="change('se')" ></div>
<div id="d4" @mousedown="change('w')" ></div>
<div id="d5" @mousedown="move" ></div>
<div id="d6" @mousedown="change('e')" ></div>
<div id="d7" @mousedown="change('nw')" ></div>
<div id="d8" @mousedown="change('n')" ></div>
<div id="d9" @mousedown="change('ne')" ></div>
</div>
</template>
<script type="text/javascript">
export default {
//这里需要将模块引出,可在其他地方使用
name: "Move_Button",
props: ['message'],
data (){
return {
// message: "A great expedition!"
}
},
methods:{
move(e){
let odiv = document.getElementById("vue"); //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup=(e)=>{
document.onmousemove = null;
document.onmouseup = null;
}
} ,
change(asc){
let as=asc;
let odiv = document.getElementById("vue"); //获取目标元素
let width=odiv.offsetWidth;
let height=odiv.offsetHeight;
let left= odiv.offsetLeft+width/2; //获取目标中心点原位置
let top = odiv.offsetTop+height/2;
document.onmousemove=(e)=>{
//算出鼠标相对元素的位置及变化的大小
// alert(odiv.width);
let disW = e.clientX - left;
let disH= e.clientY - top;
let disX = left-Math.abs(disW)*2+width/2;
let disY = top-Math.abs(disH)*2+height/2;
//默认变化大小是向左向下变化,因此向上或者向左变化大小需要移动位置来保证视觉效果
if(as.search("s")!= -1){
odiv.style.height = Math.abs(disH*2)+'px';
odiv.style.top = disY + 'px';
}
if(as.search("n")!= -1){
odiv.style.height = Math.abs(disH*2)+'px';
}
if(as.search("w")!= -1){
odiv.style.width = Math.abs(disW*2)+ 'px';
odiv.style.left = disX + 'px';
}
if(as.search("e")!= -1){
odiv.style.width = Math.abs(disW*2)+ 'px';
}
};
document.onmouseup=(e)=>{
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
<style type="text/css">
#vue{
position: relative;
height: 200px;
width: 200px;
position: fixed;
z-index: 99999;
border-style: solid;
}
#d1{
position: relative;
cursor:nw-resize;
float: left;
width: 10%;
height: 10%;
background: #c1dd95;
}
#d2{
position: relative;
float: left;
cursor: n-resize;
width: 80%;
height: 10%;
background: #9dc7e4;
}
#d3{
position: relative;
cursor: ne-resize;
float: left;
width: 10%;
height: 10%;
background: #c1dd95;
}
#d4{
position: relative;
cursor: w-resize;
float: left;
width: 10%;
height: 80%;
background: #9dc7e4;
}
#d5{
position: relative;
cursor: crosshair;
float: left;
width: 80%;
height: 80%;
background: #c1dd95;
}
#d6{
position: relative;
cursor: e-resize;
float: left;
width: 10%;
height: 80%;
background: #9dc7e4;
}
#d7{
position: relative;
cursor: sw-resize;
float: left;
width: 10%;
height: 10%;
background: #c1dd95;
}
#d8{
position: relative;
cursor: s-resize;
float: left;
width: 80%;
height: 10%;
background: #9dc7e4;
}
#d9{
position: relative;
cursor: se-resize;
float: left;
width: 10%;
height: 10%;
background: #c1dd95;
}
</style>