前言

新年第一篇文章，记录一下我前段时间封装的一个某视频剪辑软件组件吧。技术需要积累，有时间我把我之前写的还不错的组件都开源出来。并尝试某视频剪辑软件和反应两种方式的组件封装。今天简单写下鼠标框选差异选中效果的封装吧。

差异框选实现

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

其实总结起来就两步：

鼠标左键按下不放，移动鼠标出现矩形选框；鼠标左键松开，根据上边出现的矩形选框统计选框范围内的数字正射影像图元素；创建一个跟随鼠标的div，代码如下：

//创建选框节点这个。SelectBoxshard=文档。CreateElement(' div ')这个。选择框碎片。类名称='豪客房-选择-盒'文件。尸体。appendchild(这个。SelectBoxshard)这个。scrollX=文档。文档元素。scrollTop | |文档。尸体。scrollTop//设置选框的初始位置这个。startx=e . x这个。这是。scrollx//e是鼠标事件的这个事件。starty=e . y这个。这是我的客户。scrolly//e是鼠标事件的这个事件。选择Boxshreshold。风格。CSS文本=` left : $ { this。StartX } pxtop:${this.startY}px `鼠标移动，获取被选中差异列表，增加一个临时班级

这个。选择对话框。风格。display=' block '//上面创建的鼠标跟随差异出现//根据鼠标移动，设置选框的位置、宽高这个。initx=e . x这个。这是。scrollx/鼠标移动的初始位置滚动轴的位置这个。inity=e . y这个。这是我的客户。scrolly/暂存选框的位置及宽高，用于将选择项目选中this.left=Math.min(this.initx，this。这个。top=数学。敏(这个。首先，这个。这个。宽度=数学。ABS(这个。initx-这个。这个。身高=数学。ABS(这个。这个。这个。选择boxsharsh。风格。left=` $ { this。左} px。选择boxsharsh。风格。top=` $ { this。这个。选择boxsharsh。风格。width=` $ { this获取要选中的差异列表用于(设I=0；I fileDivs . lengthi){ let ItemX _ pos=fileDivs[I].与文件div[I]的偏移量.偏移量让ItemY _ pos=FileDivs[I].偏右文件间距[i].偏移顶部字母条件1=ItemX _ pos this。左字母条件2=ItemY _ pos这个。顶部字母条件3=文件大小[1]。offsetLeft(这个。留下这个。宽度)让条件4=fileDivs[I].偏移顶部(这。在这上面。高度)if(条件1条件2条件3条件4){//在框选范围之内文件。班级名单。add(' temp-selected ')} else { fileDivs[I]。班级名单。移除('临时选择')} }鼠标抬起，增加选中班级

让selectDom=document。getelementsbyclassname(' temp-selected ')；[].slice.call(selectDom).forEach(item={ if(item。班级名单。包含('选定'){ item。班级名单。移除('选定')} else { item。班级名单。添加('选定')}项。班级名单。移除(' temp-selected ')})if(这。选择框短路。父节点。移除子(这个。select box short)} catch(err){//console。日志(错误)} }让文件divs=文档。getelementsbyclasname(' list ')//这里是改变数据用于(设I=0；I fileDivs . lengthi){ if(fileDivs[I]。班级名单。包含('选定'){此。时间列表[I]=' 1 ' } else { this。时间列表[I]=' 0 ' } }效果如下如：

向国家预防机制发布的代码

这个组件，包括我之前写的vue移动终端下拉加载下一页数据的组件，已经发布给npm了。

国家预防机制地址：https://www.npmjs.com/package/timedivselect

使用：

使用NPM安装timedivselect-s从“timedivselect”导入timedivselect的示例：

https://github.com/confidence 68/timeDivselect/blob/master/src/app . vue

顺便说一下，我们来谈谈npm发布中遇到的一个小问题

我之前也发布过一些npm包。虽然之前没有写博客，但是网上有很多包。

第一次使用时，通常是：

npm adduser//输入用户名和密码已经不是第一次了【npm网站要提前注册，npm网站用户名和密码】

发布和删除npm登录等

Npm发布//发布NPMPUNPublish包名//撤销删除回到主题，我今天遇到的问题是NPM:No _ Perms私有模式启用，只有admin可以发布这个模块

之前的发布都是好的，为什么这次发布会突然有了这个错误的消息？原来我指定了npm的淘宝形象。

目前推荐NRM

Sudo npm安装-g nrm查看源列表

Nrm ls使用一个源

使用npm的nrm可以通过这种方式重新发布。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。