前端实现密码强度组件

前端鉴别密码强度

前端鉴别密码强度可以用到一个库”zxcvbn“
由于是vue3+ts
相关代码如下：
由于是用到的vue3需要在计算出密码强度之后填充相应百分比的宽度和颜色，这里我们使用了vue3的新特性，将js变量和css进行绑定

width: v-bind(barWidth);
background-color: v-bind(barColor);

审查了一下页面元素其实现是将js变量和css变量进行绑定

:root{
    --primary-color: red;
    --base-width: 120px;
}
// 使用
.big-box {
    height: 100%;
    width: var(--base-width)
    color: var(--primary-color)
}

passwordStrength.vue

<template>
  <div class="strength-container">
    <div class="input-top">
      <!-- <span class="label">密码：</span> -->
      <el-input
        type="password"
        v-model="password"
        @input="pasInput"
      ></el-input>
    </div>
    <div class="password__strength-meter-bar">
      <div class="strength-meter-bar--fill"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { zxcvbn } from '@zxcvbn-ts/core';
import { ref } from 'vue';
let colorMap = {
  0: '#e74242', //红
  1: '#EFBD47', // 黄
  2: 'orange',
  3: '#1bbf1b', //绿
  4: 'green' //绿
}
let password = ref<string | number>('');
let barColor = ref<string | number>('')
let barWidth = ref<string>('0%')
const pasInput = (value) => {
  let { score } = zxcvbn(value);
  barColor.value = colorMap[score]
  barWidth.value = `${(score + 1) * 20}%`
  if(value === '') {
    barWidth.value = '0'
  }
};
</script>

<style lang="scss" scoped>
.strength-container {
  width: 600px;
}
.input-top {
  display: flex;
  align-items: center;
  .label {
    display: block;
    width: 60px;
  }
}
.password__strength-meter-bar {
  position: relative;
  height: 6px;
  margin: 10px auto 6px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  &::before,
  &::after {
    position: absolute;
    z-index: 10;
    display: block;
    width: 20%;
    height: inherit;
    background-color: transparent;
    border-color: white;
    border-style: solid;
    border-width: 0 5px;
    content: '';
  }

  &::before {
    left: 20%;
  }

  &::after {
    right: 20%;
  }
  .strength-meter-bar--fill {
    position: absolute;
    height: 100%;
    left: 0;
    width: v-bind(barWidth);
    background-color: v-bind(barColor);
    transition: width 0.5s ease-in-out, background 0.25s;
  }
}
</style>

最近一直在学习和写vue3相关的东西，记录一些笔记，希望自己能够坚持下去。