vue中仿window系统左键画框效果
一、代码原理
通过鼠标按下,移动,抬起事件来操作
- 首先鼠标按下来获取当前按下的位置
- 然后通过判断来进行鼠标移动的操作,判断鼠标是否按下,按下时才能执行鼠标移动的事件
- 在移入过程中的根据框的多个形式来判断画框操作
- 最后松开时恢复到原有的样子
二、上代码
<template>
<div>
<div class="cc" style="border:1px solid red;width:100%;height:100vh" @mousedown="dian" @mousemove="yi" @mouseup="li">
<div
id="container"
v-bind:style="{backgroundColor:back,
height:h+'px',
width:w+'px',
position:'absolute',
left:left+'px',
top:top+'px',
opacity:0.2,
border:len+'px dashed #000'}"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
py: "", //开始y轴的位置
px: "", //开始x轴的位置
back: "#31676f", //框框背景颜色
h: "", //框框的高度控制
w: "", //框框的宽度控制
top: "", //框框的位置控制
left: "", //框框的位置控制
len: 0 //框框的边框
};
},
methods: {
dian(event) {
// console.log(event);
this.px = event.pageX; //获取x坐标
this.py = event.pageY; //获取y坐标
},
yi(event) {
if (this.px == "" || this.py == "") {
return;
}
var px1 = this.px;
var px2 = this.py;
this.left = event.pageX;
this.top = event.pageY;
this.h = this.top - this.py;
this.w = this.left - this.px;
var hc = -this.h;
var wc = -this.w;
this.len = 1;
this.back = "#31676f";
if (this.h < 0 && this.w >= 0) {
this.h = hc;
this.left = px1;
} else if (this.h >= 0 && this.w < 0) {
this.w = wc;
this.top = px2;
} else if (this.h < 0 && this.w < 0) {
this.h = hc;
this.w = wc;
} else {
this.left = this.px;
this.top = this.py;
}
if (this.w < 0) {
this.w = 0 - this.w;
}
if (this.h < 0) {
this.h = 0 - this.h;
}
},
li() {
//鼠标离开时数据恢复成原来的样子
this.px = "";
this.py = "";
this.h = "";
this.w = "";
this.top = "";
this.left = "";
this.len = 0;
this.back = "";
}
}
};
</script>
<style>
</style>
三、心得
非常好玩的一个小东西,可以加在很多的demo里面,代码都非常简单,一看就懂,希望对你有所帮助