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学习笔记(七) js函数介绍
Jun 19 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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
PHP个人网站架设连环讲(四)
2006/10/09 PHP
第十四节--命名空间
2006/11/16 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
基于webpack 实用配置方法总结
2017/09/28 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
判断js数据类型的函数实例详解
2019/05/23 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python实现人脸签到系统
2020/04/13 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
水务局局长岗位职责
2013/11/28 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
产假请假条
2014/04/10 职场文书
文艺晚会开场白
2015/05/29 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL