vue封装一个简单的div框选时间的组件

记录一下我前段时间封装的一个vue组件吧。技术需要积累，有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。

div框选实现

div框选效果，其实没有什么好的方法，就是获取鼠标事件，根据鼠标的位置，动态创建一个跟随鼠标的div。【注：这种方式需要依赖position的定位方式，一般鼠标事件位置是针对全局的，所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然，鼠标框选区域和被框选区域很难保持一致。】

其实总结起来就两步：

鼠标左键按下不放，移动鼠标出现矩形选框；

鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素；

创建一个跟随鼠标的div，代码如下：

 //  创建选框节点
      this.selectBoxDashed = document.createElement('div') this.selectBoxDashed.className = 'haorooms-select-box' document.body.appendChild(this.selectBoxDashed) this.scrollX = document.documentElement.scrollLeft || document.body.scrollLeft this.scrollY = document.documentElement.scrollTop || document.body.scrollTop // 设置选框的初始位置 this.startX = e.x + this.scrollX || e.clientX + this.scrollX // e是鼠标事件的event this.startY = e.y + this.scrollY || e.clientY + this.scrollY // e是鼠标事件的event this.selectBoxDashed.style.cssText = `left:${this.startX}px;top:${this.startY}px`

鼠标移动，获取被选中div列表，增加一个临时class

  this.selectBoxDashed.style.display = 'block' // 上面创建的鼠标跟随div出现 // 根据鼠标移动，设置选框的位置、宽高 this.initx = e.x + this.scrollX || e.clientX + this.scrollX //鼠标移动的初始位置+滚动轴的位置 this.inity = e.y + this.scrollY || e.clientY + this.scrollY // 暂存选框的位置及宽高，用于将 select-item 选中 this.left = Math.min(this.initx, this.startX) this.top = Math.min(this.inity, this.startY) this.width = Math.abs(this.initx - this.startX) this.height = Math.abs(this.inity - this.startY) this.selectBoxDashed.style.left = `${this.left}px` this.selectBoxDashed.style.top = `${this.top}px` this.selectBoxDashed.style.width = `${this.width}px` this.selectBoxDashed.style.height = `${this.height}px` let fileDivs = document.getElementsByClassName('list') // 获取要选中的div列表 for (let i = 0; i < fileDivs.length; i++) { let itemX_pos = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft let itemY_pos = fileDivs[i].offsetHeight + fileDivs[i].offsetTop let condition1 

转载于:https://www.cnblogs.com/zqw111/p/11295525.html