一个文笔一般,想到哪是哪的唯心论前端小白。
前言
接着前面的弹框来的,既然有弹框,那么表单肯定就少不了,这不在弹框里面有个密码强度的回显小demo要做,就花了几分钟想了想,最后选择了用纯 css 的方案来实现了一下。
功能很简单,校验什么的都不涉及,只是一个回显的账号强度的小组件,感觉也可以用来水一篇文章,而且可能在不知道什么时候会复用,就先记录一下吧!
大概就是这个玩意:
思路
这个小玩意实现的方式有很多,但是综合需求场景最终选择了最简单暴力的做法。
前提,开发环境是 html + jQuery 不是现在的工程化项目。
需求简介
首先安全级别是由后台返回的,会综合账号绑定的 邮箱、密码强度、手机号等多个维度综合评论出来的。前端只需要做个回显。
需求分析
前端要做的其实就是个静态的回显样式。
具体方案可以分为几个方向:
- 纯 HTML + CSS,在回显数据
低|中|高
三个级别的时候,切换一下 class 即可。 - 使用纯 js + 模板控制,在拿到数据的时候,重新渲染模板。
- js 结合 html ,提前准备好多个等级的全量 dom,控制其显示隐藏。
- js 结合调用 style API,控制样式。
- ...
方案太多了,就简单分享一下这次的方案吧!
开发
既然是用 css + html 来做这个小插件,那么就要考虑两块内容:
- 如何和表单进行配合,常见的适配如 label 宽度,目标组件的宽度,响应式。
- 控制能力,如何最简单的控制值。
首先简单是 dom 结构,图省心,上来就写了这样的结构。
html
<p>
<span class="label">账号安全级别:</span>
<!-- 等级使用方法: 修改 dengji-A 这个 class 即可,目前支持 ABC 三个级别,颜色修改样式表中对应的 --dengjiA/B/C 所对应的色值即可 -->
<span class="value dengji-C dengji">
<span></span>
<span></span>
<span></span>
<span>高</span>
</span>
<span class="fr"> </span>
</p>
简单说一下上面的内容吧:
- p 标签是当前表单项,对应的是 element-ui 里面的 form-item,之所以不用 div 是我个人以为用 p 更合适。
- span.label 就是 label 了,统一使用 label 这个 class 名,可以和前面的表单项,保持统一风格。
- span.value 就是 value ,前面的表单项中,所有的值也都是用的这个 class 名。正如注释所写的,
dengji-A\dengji-B\dengji-C
这三个class切换即可实现色阶的切换,最后一个span用来放低|中|高
的文案。 - span.fr 是右对齐,用来放操作按钮的。
看到这里应该知道css怎么写了吧?
其实就是使用写了三个class,每个都是用 :nth-of-type()
这个选择器来修改三个span的颜色就好了,为了方便管理,使用css变脸来记录几个色值即可。
分享
没啥好分享的,就粘一下对应的 css 就好了:
css
:root {
--gray: #ebecee;
--dengjiA: rgb(252, 192, 192);
--dengjiB: rgb(255, 111, 111);
--dengjiC: rgb(250, 0, 0);
}
.dengji span {
display: inline-block;
height: 20px;
width: 50px;
vertical-align: middle;
}
.dengji span:nth-of-type(4) {
margin-left: 20px;
color: gray;
}
.dengji-A span:nth-of-type(1) {
background: var(--dengjiA);
}
.dengji-A span:nth-of-type(2) {
background: var(--gray);
}
.dengji-A span:nth-of-type(3) {
background: var(--gray);
}
.dengji-B span:nth-of-type(1) {
background: var(--dengjiA);
}
.dengji-B span:nth-of-type(2) {
background: var(--dengjiB);
}
.dengji-B span:nth-of-type(3) {
background: var(--gray);
}
.dengji-C span:nth-of-type(1) {
background: var(--dengjiA);
}
.dengji-C span:nth-of-type(2) {
background: var(--dengjiB);
}
.dengji-C span:nth-of-type(3) {
background: var(--dengjiC);
}
请忽略拼音 class 哈,实在懒得改了。
后记
咳咳,其实就是一篇水文,主要是记录一下思路,关键是一个需求分析思路,以及需要考虑的部分,并做一些取舍。
例如,上面说的 响应式 ,就被舍掉了,因为整个 form 的宽度是固定的,而且只需要在PC上展示,而且有些工作自己知道就好了。用 flex 就可以简单的实现了。
有所思必有所得:
- 一个远古开发模式的开箱即用的 小插件。
- 一个已经不适应当前市场的开发思路,以后少用这种方式,还是使用模板的方式吧!
- 传说中的屎山粪海就是这么开始的。
最后说一句,这个组件我是不推荐这么开发的!后续会使用其他方式去重写它。不管怎么说吧,在现在 CURD 横行的工作记录里面,这么一个小玩意,也算是一个值得记录的事情了!!!