原生JS实现框选功能（Vue）
效果分析流程可以分为两步：鼠标框选区域，确定框区域包含的checkbox，并进行相应处理HTML和CSS布局布局为基于element-ui，一个父容器框，里面有一个maskdiv，还有一个el-checkbox-group块。父容器设置position：relative；子掩码容器设置位置：绝对；并且它的宽高偏移值是根据鼠标当前位置动态计算的
.box{width:800px;边距：20px自动；位置：相对；溢出：隐藏；用户选择：无；背景：#409eff；不透明度：0.4；}}JS实现框选逻辑，其实可以分为4步：按下mousedown，记录当前起点坐标start_x,start_y，为鼠标移动绑定mousemove和mouseup事件mousemove，更新终点坐标end_x和end_y实时选择矩形的大小和位置。释放mouseup以删除mousemove和mouseup事件。根据选择矩形的大小和位置，计算范围内的复选框个数，并进行相应的处理1.给框绑定mousedown事件
handleMouseDown(event:any){this.start_x=event.clientX;this.start_y=event.clientY;文档正文.addEventListener('mousemove',this.handleMouseMove);document.body.addEventListener('mouseup',this.handleMouseUp);}2.mousemove事件，比较简单，更新end_x,end_y坐标即可handleMouseMove(event:MouseEvent){this.end_x=event.clientX;this.end_y=event.clientY;}3.mouseup事件，去掉mousemove和mouseup事件，调用判断方法handleMouseUp(){document.body.removeEventListener('mousemove',this.handleMouseMove);document.body.removeEventListener('mouseup',this.handleMouseUp);这个.handleDomSelect();this.resSetXY();}4、选框逻辑处理的难点在于如何判断一个元素是否被选框。问题可以转化为框选择矩形是否相交或包含在复选框矩形中，即两个矩形是否相交或包含关系。假设矩形A1的左上角坐标为(x1,y1)；矩形的宽为width1，高为height1；矩形A2的左上角坐标为(x2,y2)；矩形的宽为width2，高为height2；绘图分析，只看水平方向：从图中可以得出，在x方向：letmaxX=Math.max(x1+width1,x2+width2)makeminX=IfMath.max(x1,x2)相交或包含，必须满足：maxX-minX<=width1+width2；同样容易得到y轴相交的判断使用Element.getBoundingClientRect()获取dom元素的位置信息Element.getBoundingClientRect()方法返回元素的大小及其相对视口的位置返回值是一个DOMRect对象，返回结果是包含完整元素的最小矩形，有left,top,right,bottom,x,y,width,height，只读属性，单位为像素，用于描述整个边界。这部分的逻辑如下，比较简单collide(rect1:any,rect2:any):boolean{constmaxX:number=Math.max(rect1.x+rect1.width,rect2.x+rect2.width);constmaxY:number=Math.max(rect1.y+rect1.height,rect2.y+rect2.height);constminX:number=Math.min(rect1.x,rect2.x);constminY:number=Math.min(rect1.y,rect2.y);如果（maxX-minX<=rect1.width+rect2.width&&maxY-minY<=rect1.height+rect2.height）{returntrue;}else{返回错误；难度已经突破，遍历checkbox集合，每个checkbox执行上面的矩形相交判断，并进行相应的check处理，这里不再完整代码源码ENDEND
