公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

vue封装一个简单的div框选时间的组件

前言

新年第一篇文章,记录一下我前段时间封装的一个vue组件吧。技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。

div框选实现

div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div。【注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然,鼠标框选区域和被框选区域很难保持一致。】

css中的visibility和position新属性sticky

前言

今天介绍的css的visibility和position新属性sticky,之前的文章中并没有提及。关于css文章,前面写了不少。但是这2个的介绍真没有,今天简单介绍一下,就当是补充和积累了吧。

visibility

关于visibility,我们平时用的蛮多,大家知道的是,他和display:none的区别。visibility:hidden是占空间的,渲染的时候会渲染,但是display:none是不占空间的,具体渲染和加载,请看我之前的文章:https://www.haorooms.com/post/web_http_request

但是:把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

关于css中的那些scroll

一、滚动轴scrollbar

说到css中的scroll,我们最先想到的应该是overflow:scroll。想到这个scroll之后,自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴,mac和window显示各异,不同浏览器也显示不同。早起也有一些js的解决方案。例如:jScrollPanetinyscrollbar等等。后来,谷歌浏览器支持滚动轴的修改,我之前也有文章:https://www.haorooms.com/post/CSS_selections

控制滚动轴的7个伪元素分别是:

::-webkit-scrollbar:整个滚动条
::-webkit-scrollbar-button:滚动条上的按钮(下下箭头)
::-webkit-scrollbar-thumb:滚动条上的滚动滑块
::-webkit-scrollbar-track:滚动条轨道
::-webkit-scrollbar-track-piece:滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner:当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer:某些元素的交汇部分的部分样式(类似textarea的可拖动按钮)

Page Visibility API及Page Lifecycle API的介绍及应用

前言

今天主要介绍2个api,一个是Page Visibility API,一个是Page Lifecycle API,这两个api你可能用的不多,关于Page Visibility API,目前大部分主流浏览器已经支持。

Page Visibility API主要是监听网页是否隐藏,是否可见。Page Lifecycle API可以让我们对整个网页的生命周期有了更好的把控能力。

Page Visibility API

首先,我介绍一下Page Visibility API的应用场景

用户对我们的h5页面进行如下操作

1、用户点击了一条系统通知,切换到另一个 App。

2、用户进入任务切换窗口,切换到另一个 App。

3、用户点击了 Home 按钮,切换回主屏幕。

4、操作系统自动切换到另一个 App(比如,收到一个电话)

rollup打包js的注意点

前言

rollup比较适合打包js的sdk或者封装的框架等,例如,vue源码就是rollup打包的。webpack比较适合打包一些应用,例如SPA或者同构项目等等。最近我们对rollup小试牛刀了一下。简单分享一些注意事项吧。

rollup基础

rollup基础知识及插件的一些使用,网上有不少资料,可以去查阅。