79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<template>
|
|
<div class="aa-pwd">
|
|
<div class="aa-pwd-field" :class="{ 'is-focus': focused }">
|
|
<input
|
|
ref="input"
|
|
class="aa-pwd-input"
|
|
:type="visible ? 'text' : 'password'"
|
|
:value="modelValue"
|
|
:placeholder="placeholder"
|
|
@input="onInput"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
/>
|
|
<button class="aa-pwd-toggle" type="button" @click="visible = !visible">
|
|
{{ visible ? '隐藏' : '显示' }}
|
|
</button>
|
|
</div>
|
|
<div v-if="showStrength" class="aa-pwd-strength">
|
|
<span
|
|
v-for="(b, i) in 3"
|
|
:key="i"
|
|
class="aa-pwd-bar"
|
|
:class="barClass(i)"
|
|
></span>
|
|
</div>
|
|
<div class="aa-pwd-tip">{{ tip }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' },
|
|
placeholder: { type: String, default: '请输入密码' },
|
|
showStrength: { type: Boolean, default: true }
|
|
});
|
|
const emit = defineEmits(['update:modelValue', 'change']);
|
|
|
|
const visible = ref(false);
|
|
const focused = ref(false);
|
|
|
|
const level = computed(() => {
|
|
const v = props.modelValue;
|
|
if (!v) return '';
|
|
let s = 0;
|
|
if (v.length >= 8) s++;
|
|
if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
|
|
if (/\d/.test(v)) s++;
|
|
if (/[^A-Za-z0-9]/.test(v)) s++;
|
|
if (v.length >= 12) s++;
|
|
if (s <= 2) return 'weak';
|
|
if (s <= 3) return 'mid';
|
|
return 'strong';
|
|
});
|
|
|
|
const tip = computed(() => {
|
|
if (level.value === 'weak') return '弱：建议使用字母、数字与符号组合';
|
|
if (level.value === 'mid') return '中：再增加长度或符号更安全';
|
|
if (level.value === 'strong') return '强：密码强度良好';
|
|
return '';
|
|
});
|
|
|
|
function onInput(e) {
|
|
emit('update:modelValue', e.target.value);
|
|
emit('change', e.target.value);
|
|
}
|
|
function barClass(i) {
|
|
if (!props.showStrength || !level.value) return '';
|
|
const on =
|
|
(level.value === 'weak' && i < 1) ||
|
|
(level.value === 'mid' && i < 2) ||
|
|
(level.value === 'strong' && i < 3);
|
|
return on ? 'on ' + level.value : '';
|
|
}
|
|
</script>
|
|
|
|
<style src="./PasswordInput.css"></style>
|