Total 12 Posts
使用Docker快速实现Nginx服务
jsnginxdocker
基于dnd-kit实现Antd Table组件拖拽排序
reactantd
### 背景 最近业务需求上要求对表格加入拖拽排序功能,由于我们UI组件库基于[antd][1],根据组件库官方文档给出的基于[react-dnd][3]、[react-sortable-hoc][4]示例,与我们自身业务需求的调研,最后选择[react-sortable-hoc][4]库作为接入拖拽排序接入。在查阅该库相关文档的过程中其作者明确定不再积极维护,并强烈建议采用[dnd-kit][2]替换。本着~~学习的态度~~一步到位想法(偷懒),因此最终决定直接使用[dnd-kit][2]库来实现拖拽排序功能。
E2E测试之Playwright身份验证
testplaywrightjs
CSS之宽高比例布局
css
在某些特定的场景中,如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定,那么我们皆大欢喜,但在目前的的应用发展中宽高自适应的方式才能满足我们的需求,那么我们该如何这种自适应的**宽高比布局**呢? ### 什么是宽高比? 宽高比也称纵横比,元素的纵横比描述了其宽度和高度之间的比例关系。两种常见的视频宽高比为4:3和16:9。要保持div的宽高比,通过为`padding-top`/`padding-bottom`添加一个百分比值。不同的宽高比具有不同的百分比值。或采用视窗单位`vw`/`vh`设置相应高宽。其中一些如下所示: | aspect ratio | padding-bottom/top value | vw/vh(width\|height) | |
CSS元素居中布局
css
在前端开发中,我们经常会遇到各种上不同场景的关于居中的布局,一般水平居中是相对简单,而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 ### 水平居中 水平居中相对于其它几中居中排列要简单的多,按标签元素可分为行内元素与块级元素居中: #### 1、行内元素 > 如:`a` `img` `span` `em` `b` `small` 此类标签元素及文本 ```css .center { text-align: center; } ``` #### 2、块级元素 > 如:`div` `section` `header` `p`此类标签元素,需要设置宽度 ```css .center { margin: 0 auto; } ``` ### 垂直居中 #### 1、line-height 针对有且仅有一行内容时可行。将line-height值设为相对应高度即可。 #### 2、vertical-align 针对行内元素如`img` `span`等元素,其对齐相对于文本基线。达不到完美的垂直居中,不常用。 #### 3、其它 关于垂直居中其它方式参考水平垂直居中。
React 组件生命周期
reactjs
每个组件都有几个“生命周期方法”,您可以覆盖这些方法以在流程中的特定时间运行代码。您可以将此生命周期图用作备忘单。在下面的列表中,常用的生命周期方法被标记为粗体。它们中的其余部分存在于相对罕见的用例中。
文本域光标定位
js
在应用中某些场景下,我们会涉及到对表单元素`input`与`textarea`或者是带有属性`contenteditable="true"`的元素,设置自动获取焦点。在这些元素没有内容的情况下那么设置焦点非常容易,然而现实情况往往总是与众不同。那么在遇到这些需求我们该如何做呢?
利用CANVAS生成缩略图
canvasjs
利用CANVAS生成缩略图方法总结
表单元素复选框与单选框视觉优化
cssjs
谈起表单元素在各浏览器上的表现形式,相信各位前端开发者与 UI 设计师都比较头疼,尤其是 checkBox、radio 以及 select 这三种表单元素展现各异。有时候我们为了效率不得不牺牲 UI 效果,那么有什么方法可以在保障效率的情况下,实现功能并达到与 UI 原稿同样的效果呢?相信大家也都或听过,或用过以下两种方法。
CSS3自主义浏览器滚动条
cssjs
由于平台不同,或用户采用的浏览器不同,或因同浏览器版本不同,都或多或少存在一定的差别,造成与 UI 设计图有一定的差别,影响用户视觉体验。那么目前这类问题常采用的方法都有那些嗯?
CSS选择器之nth-child
css
在我们对一组相同元素作不同表现形式的操作时,在还没有选择器`:nth-child`与`:nth-of-type`时,我们常用到的方法可能是利用 JS 来控制表现形式,或者采用 CSS 选择器类处理这类问题。 我们需要在 HTML 中加入一些类属性,如果数量非常大时,又或者我们只给奇数或偶数或其它规则的元素定义不同样式呢,这样我们代码就非常不容易维护,或许你会说通过 JS 脚本就容易多了,但是脚本它也是通过改变元素节点的 style 属性或类属性来达到需要的。相对来说,当数据量大了时,都不太容易维护。 以 CSS 类选择器示例,如下: ```html <ul class="example"> <li class="example-red">Red.</li> <li class="example-orange">Orange.</li> <li class="example-yellow">Yellow.</li> <li class="example-green">Green.</li> <li class="example-blue">Blue.</li> </ul> ``` ```css .example { } .example-red { color: red; } .example-orange { color: orange; } .example-yellow { color: yellow; } .example-green { color: green; } .example-blue { color: blue; } ``` 从上面例子我们已经看出,html 与 css 相对已经变得复杂。所幸现在我们可以用 CSS3 子选择器:nth-child 与:nth-of-type 来实现这类需求。
正则表达式
regexpjs
以下正则表达式均从各博客收集整理得来,目前还未作测试,请谨慎使用,若有错误麻烦各位及时反馈给我! 联系方式:[whenhan@foxmail.com](mailto:whenhan@foxmail.com) ### 正则工具 * [regexbuddy](//www.regexbuddy.com/) * [WEB 前端助手(FeHelper)](//www.baidufe.com/fehelper)