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 = 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‘
        }
      }

效果如下如:

代码发布到npm

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

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

使用:

npm install timedivselect -S

import timeDivSelect from ‘timedivselect‘

使用例子:

https://www.jkys120.com

顺便说说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

这样再发布既可以了。

原文地址:https://www.cnblogs.com/zqw111/p/11295525.html

时间: 2024-10-06 20:04:17

vue封装一个简单的div框选时间的组件的相关文章

Vue小白踩坑 使用vue做一个简单的todo list

前言 寒假待在家,无所事事,便开始做起了毕设,由于要写跨端应用,基础是vue,所以先攻克vue 做一个简单的todo 当然是自己做的,效率有点儿低,不过能做出来已经很不错了把 hhh 源码 本质上毕设的前端展示,也就是对一个todo-list加一个好看的ui,数据排版等等花里胡哨的东西,本质的东西还是数据的crud <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

Directx11学习笔记【四】 封装一个简单的Dx11DemoBase

根据前面两个笔记的内容,我们来封装一个简单的基类,方便以后的使用. 代码和前面类似,没有什么新的内容,直接看代码吧(由于代码上次都注释了,这次代码就没怎么写注释o(╯□╰)o) Dx11DemoBase.h Dx11DemoBase.h #pragma once #include <d3d11.h> #include <D3DX11.h> #include <DxErr.h> class Dx11DemoBase { public: Dx11DemoBase(); vi

封装一个简单的solrserver组件

一个简单的solrserver组件 实现索引更新的异步处理,以及查询接口,日志/线程池/队列监控没有加上. SolrDocment封装 接口: public interface ISolrDocument { public SolrInputDocument convertToInputDocument() throws Exception; public void buildSolrDocument(SolrDocument document) throws Exception; } 实现:

代码改变世界 | 如何封装一个简单的 Koa

下面给大家带来:封装一个简单的 KoaKoa 是基于 Node.js 平台的下一代 web 开发框架Koa 是一个新的 web 框架,可以快速而愉快地编写服务端应用程序,本文将跟大家一起学习:封装一个简单的 Koa一个简单的 http 服务使用 node 提供的 http 模块,可以很容易的实现一个基本的 http 服务器,新建一个 application.js 文件,内容如下: const http = require('http') const server = http.createSer

Android一个简单的警告框,带标题、图标、按钮的代码

工作之余,将内容过程比较常用的内容做个珍藏,下面内容是关于Android一个简单的警告框,带标题.图标.按钮的内容,应该是对大伙有些用. AlertDialog alertDialog = new AlertDialog.Builder(this).create();alertDialog.setTitle("Title");alertDialog.setMessage("Message");alertDialog.setButton("OK",

Python+Selenium进阶版(八)- Python自定义封装一个简单的Log类

目标:如何写一个Python日志类,用来输出不同级别的日志信息到本地文件夹下的日志文件里. 练习场景: 我们需要封装一个简单的日志类,主要有以下内容: 1.生成的日志文件格式是 年月日分秒.log 2.生成的XXX.log文件存储在项目根目录下Logs文件夹下 3.这个日志类,支持INFO,ERROR两种日志级别 4.日志里,每行日志输出,时间日期+执行类名称+日志级别+日志描述 解决思路: 1.在根目录下新建一个Logs的文件夹,获取这个Log的相对路径: 2.日志的保存命名,需要系统时间:

使用Laravel 和 Vue 构建一个简单的SPA

本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Application)呢?流程大致分为下面三步: 页面请求Laravel的一个路由 路由返回渲染一个包含了Vue的SPA框架 在上面渲染出来的框架中使用Vue来加载不同的页面单元模块 主要会学习使用到三个东西: laravel vue.js Vue-router axios 上面是一个简单的流程图,从

用vue实现一个简单的时间屏幕

前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子点我查看,觉得没啥意思的就不需要再往下看了 简单的搭建一下 初始化一个 vue 项目 vue create vue-time 然后无脑下一步就好了(回车),这里我打算用 scss 方便我们书写样式 ,所以创建完成后,我们在安装下 scss cd vue-time npm i sass-loader

C 封装一个简单二叉树基库

引文 今天分享一个喜欢佩服的伟人,应该算人类文明极大突破者.收藏过一张纸币类型如下 那我们继续科普一段关于他的简介 '高斯有些孤傲,但令人惊奇的是,他春风得意地度过了中产阶级的一生,而  没有遭受到冷酷现实的打击:这种打击常无情地加诸于每个脱离现实环境生活的  人.或许高斯讲求实效和追求完美的性格,有助于让他抓住生活中的简单现实.  高斯22岁获博士学位,25岁当选圣彼德堡科学院外籍院士,30岁任哥廷根大学数  学教授兼天文台台长.虽说高斯不喜欢浮华荣耀,但在他成名后的五十年间,这  些东西就像