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 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php 文件上传类代码
2011/08/06 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
Python制作简易注册登录系统
2016/12/15 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python分布式编程实现过程解析
2019/11/08 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python cookie反爬处理的实现
2020/11/01 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
Shell编程面试题
2016/05/29 面试题
七年级历史教学反思
2014/02/05 职场文书
个人担保书范文
2014/05/20 职场文书
2014国庆节标语口号
2014/09/19 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
单位病假条范文
2015/08/17 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python