时间:2021-05-26
前言
新年第一篇文章,记录一下我前段时间封装的一个vue组件吧。技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。
div框选实现
div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div。【注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然,鼠标框选区域和被框选区域很难保持一致。】
其实总结起来就两步:
创建一个跟随鼠标的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
鼠标抬起,增加选中class
效果如下如:
代码发布到npm
这个组件,包括我之前写的vue移动端下拉加载下一页数据的组件,都发布到了npm,
npm地址:https:///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这样再发布既可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue组件开发原理与实现方法。分享给大家供大家参考,具体如下:概要vue的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比
vuejs自定义了一种.vue文件,可以把html,css,js写到一个文件中,从而实现了对一个组件的封装,一个.vue文件就是一个单独的组件。由于.vue文件
简单介绍一下vue中常用dialog组件的封装:实现动态传入内容,实现取消,确认等回调函数。首先写一个基本的弹窗样式,如上图所示。在需要用到弹窗的地方中引入组件
新学vue,参考别人封装弹出层组件。好用!1.你需要先建一个弹出框的模板://首先创建一个mack.vue{{text.title.trim()}}{{text
前言为了练习vue.js之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数