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


Posted in Javascript onJanuary 06, 2019

前言

新年第一篇文章,记录一下我前段时间封装的一个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 = itemX_pos > this.left
    let condition2 = itemY_pos > this.top
    let condition3 = fileDivs[i].offsetLeft < (this.left + this.width)
    let condition4 = fileDivs[i].offsetTop < (this.top + this.height)
    if (condition1 && condition2 && condition3 && condition4) {// 在框选范围之内
     fileDivs[i].classList.add('temp-selected')
    } else {
     fileDivs[i].classList.remove('temp-selected')
    }
   }

鼠标抬起,增加选中class

let selectDom = document.getElementsByClassName('temp-selected');
   [].slice.call(selectDom).forEach(item => {
    if (item.classList.contains('selected')) {
     item.classList.remove('selected')
    } else {
     item.classList.add('selected')
    }
    item.classList.remove('temp-selected')
   })
   if (this.selectBoxDashed) {
    try {
     this.selectBoxDashed.parentNode.removeChild(this.selectBoxDashed)
    } catch (err) {
     // console.log(err)
    }
   }
   let fileDivs = document.getElementsByClassName('list') // 这里是改变数据
   for (let i = 0; i < fileDivs.length; i++) {
    if (fileDivs[i].classList.contains('selected')) {
     this.timeList[i] = '1'
    } else {
     this.timeList[i] = '0'
    }
   }

效果如下如:

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

代码发布到npm

这个组件,包括我之前写的vue移动端下拉加载下一页数据的组件,都发布到了npm,

npm地址:https://www.npmjs.com/package/timedivselect

使用:

npm install timedivselect -S

import timeDivSelect from 'timedivselect'

使用例子:

https://github.com/confidence68/timeDivselect/blob/master/src/App.vue

顺便说说npm发布遇到的一个小问题吧

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

第一次用的时候一般是:

npm adduser
// 输入用户名,密码等【npm 网站要提前注册,npm网站的用户名和密码】

不是第一次

npm login

发布、删除等

npm publish // 发布
npm unpublish 包名 // 撤销删除

回到正题,我今天遇到的问题是npm: no_perms Private mode enable, only admin can publish this module

之前发布都是好好的,为啥突然这次发布会有这个错误信息呢?原来是因为我指定了npm的淘宝镜像。

目前推荐使用NRM

sudo npm install -g nrm

查看源列表

nrm ls

使用某个源

nrm use npm

这样再发布既可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 #Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 #Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 #Javascript
react-router4按需加载(踩坑填坑)
Jan 06 #Javascript
React 实现拖拽功能的示例代码
Jan 06 #Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 #Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 #Javascript
You might like
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
MySQL适配器PyMySQL详解
2017/09/20 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
土木工程毕业生推荐信
2013/10/28 职场文书
卫生巾广告词
2014/03/18 职场文书
热情服务标语
2014/10/07 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技