工具 - css 实现密码强度回显小组件

一个文笔一般，想到哪是哪的唯心论前端小白。

前言

接着前面的弹框来的，既然有弹框，那么表单肯定就少不了，这不在弹框里面有个密码强度的回显小demo要做，就花了几分钟想了想，最后选择了用纯 css 的方案来实现了一下。

功能很简单，校验什么的都不涉及，只是一个回显的账号强度的小组件，感觉也可以用来水一篇文章，而且可能在不知道什么时候会复用，就先记录一下吧！

大概就是这个玩意：

思路

这个小玩意实现的方式有很多，但是综合需求场景最终选择了最简单暴力的做法。

前提，开发环境是 html + jQuery 不是现在的工程化项目。

需求简介

首先安全级别是由后台返回的，会综合账号绑定的邮箱、密码强度、手机号等多个维度综合评论出来的。前端只需要做个回显。

需求分析

前端要做的其实就是个静态的回显样式。

具体方案可以分为几个方向：

纯 HTML + CSS，在回显数据 低|中|高 三个级别的时候，切换一下 class 即可。
使用纯 js + 模板控制，在拿到数据的时候，重新渲染模板。
js 结合 html ，提前准备好多个等级的全量 dom，控制其显示隐藏。
js 结合调用 style API，控制样式。
...

方案太多了，就简单分享一下这次的方案吧！

开发

既然是用 css + html 来做这个小插件，那么就要考虑两块内容：

如何和表单进行配合，常见的适配如 label 宽度，目标组件的宽度，响应式。
控制能力，如何最简单的控制值。

首先简单是 dom 结构，图省心，上来就写了这样的结构。

<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 就好了：


: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);
}