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)