-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vue封装一个简单的div框选时间的组件 #309
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
新年第一篇文章,记录一下我前段时间封装的一个vue组件吧。技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。
div框选实现
div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div。【注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然,鼠标框选区域和被框选区域很难保持一致。】
其实总结起来就两步:
创建一个跟随鼠标的div,代码如下:
鼠标移动,获取被选中div列表,增加一个临时class
鼠标抬起,增加选中class
效果如下如:
代码发布到npm
这个组件,包括我之前写的vue移动端下拉加载下一页数据的组件,都发布到了npm,
npm地址:https://www.npmjs.com/package/timedivselect
使用:
使用例子:
https://github.com/confidence68/timeDivselect/blob/master/src/App.vue
顺便说说npm发布遇到的一个小问题吧
之前我npm也发布过一些,关于如何发布npm包,我博客之前虽然没有写,但是网上很多。
第一次用的时候一般是:
不是第一次
发布、删除等
回到正题,我今天遇到的问题是npm: no_perms Private mode enable, only admin can publish this module
之前发布都是好好的,为啥突然这次发布会有这个错误信息呢?原来是因为我指定了npm的淘宝镜像。
目前推荐使用NRM
查看源列表
使用某个源
这样再发布既可以了。
The text was updated successfully, but these errors were encountered: