适用于Vue.js应用程序的小型易用密码强度计。
2020年8月6日
# 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;
}