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

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

前言

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

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

大概就是这个玩意:

思路

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

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

需求简介

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

需求分析

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

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

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

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

开发

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

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

首先简单是 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>

简单说一下上面的内容吧:

  1. p 标签是当前表单项,对应的是 element-ui 里面的 form-item,之所以不用 div 是我个人以为用 p 更合适。
  2. span.label 就是 label 了,统一使用 label 这个 class 名,可以和前面的表单项,保持统一风格。
  3. span.value 就是 value ,前面的表单项中,所有的值也都是用的这个 class 名。正如注释所写的,dengji-A\dengji-B\dengji-C 这三个class切换即可实现色阶的切换,最后一个span用来放 低|中|高 的文案。
  4. 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 就可以简单的实现了。

有所思必有所得:

  1. 一个远古开发模式的开箱即用的 小插件。
  2. 一个已经不适应当前市场的开发思路,以后少用这种方式,还是使用模板的方式吧!
  3. 传说中的屎山粪海就是这么开始的。

最后说一句,这个组件我是不推荐这么开发的!后续会使用其他方式去重写它。不管怎么说吧,在现在 CURD 横行的工作记录里面,这么一个小玩意,也算是一个值得记录的事情了!!!

相关推荐
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼3 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式