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

前言

接着前面的弹框来的，既然有弹框，那么表单肯定就少不了，这不在弹框里面有个密码强度的回显小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 横行的工作记录里面，这么一个小玩意，也算是一个值得记录的事情了！！！

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

前言

思路

需求简介

需求分析

开发

分享

后记