Vue.js 简单轻量级密码强度插件 - vue-simple-password-meter

Vue.js 简单轻量级密码强度插件 - vue-simple-password-meter
插件名称 vue-simple-password-meter
发布时间 2020年8月8日
插件作者 miladd3

适用于Vue.js应用程序的小型易用密码强度计。

变更日志:

2020年8月6日

  • 修复漏洞并与eslint修复更漂亮的冲突

安装和下载:

# NPM
$ npm install vue-simple-password-meter --save

如何使用它:

1.将密码表导入到您的项目中。

import passwordMeter from "vue-simple-password-meter";

export default {
  components: { passwordMeter },
  data: () => ({
    passwordValue: null
  })
};

2.将密码强度计添加到模板。

<template>
  <form>
    <label for="password">Password:</label>
    <input id="password" type="password" v-model="passwordValue" />
    <password-meter :password="passwordValue" />
  </form>
</template>

3.在CSS中自定义强度指标。

.po-password-strength-bar {
  border-radius: 2px;
  transition: all 0.2s linear;
  height: 5px;
  margin-top: 8px;
}

.po-password-strength-bar.risky {
  background-color: #f95e68;
}

.po-password-strength-bar.guessable {
  background-color: #fb964d;
}

.po-password-strength-bar.weak {
  background-color: #fdd244;
}

.po-password-strength-bar.safe {
  background-color: #b0dc53;
}

.po-password-strength-bar.secure {
  background-color: #35cc62;
}