1、小眼睛可以显示/隐藏明文密码（无法用input type=password，用css样式实现切换明文）

2、输入长度统计（不是自带的，用div写的，然后定位到框内的）

3、每输入一个字符分别验证每一项规则，符合就变绿色，删掉符合字符就变红色

4、根据符合规则的长度，判断密码强弱

HTML：

<template><div class="InitializesSystemKey"><div class="password-box"><div class="password-box-title"><span>初始化系统秘钥</span><Button style="margin: 15px 0;" @click="clickReturn">返回</Button></div><div class="password-box-set"><div class="password-box-set-title">设置秘钥</div><div class="password-box-set-con"><div class="password-box-set-con-text"><span>设置秘钥 <eye-outlined v-if="!isEye" @click="isEye = true" style="color: #0E56C0;"/><eye-invisible-outlined v-if="isEye" @click="isEye = false" style="color: #0E56C0;" /></span><span style="font-size: 14px;color: #88909B;">{{ text }}</span></div><div class="password-box-set-con-input"><a-textarea v-model:value="inputVal" type="password" :rows="4" placeholder="请输入" @change="changeInput" :maxlength="256" :minlength="8" :style="isEye ? { '-webkit-text-security': 'disc' } : {}" /><div class="counter">{{ charCount }}/256</div></div><!-- 验证规则显示 --><div class="password-box-set-con-rule"><div><check-outlined v-if="isLargeLetter" style="color: #3AA679;"/><close-outlined v-if="!isLargeLetter" style="color: #E53A2F;"/><span :class="isLargeLetter ? 'colorGreen' : 'colorRed'">包含大写字母</span></div><div><check-outlined v-if="isSmallLetter" style="color: #3AA679;"/><close-outlined v-if="!isSmallLetter" style="color: #E53A2F;"/><span :class="isSmallLetter ? 'colorGreen' : 'colorRed'">包含小写字母</span></div><div><check-outlined v-if="isNumber" style="color: #3AA679;"/><close-outlined v-if="!isNumber" style="color: #E53A2F;"/><span :class="isNumber ? 'colorGreen' : 'colorRed'">包含数字</span></div><div><check-outlined v-if="isSpecSymbol" style="color: #3AA679;"/><close-outlined v-if="!isSpecSymbol" style="color: #E53A2F;"/><span :class="isSpecSymbol ? 'colorGreen' : 'colorRed'">包含特殊符号</span></div><div><check-outlined v-if="isLength" style="color: #3AA679;"/><close-outlined v-if="!isLength" style="color: #E53A2F;"/><span :class="isLength ? 'colorGreen' : 'colorRed'">秘钥长度16-256位</span></div></div><div class="password-box-set-con-progress"><div class="password-box-set-con-progress-left"><div style="margin-left: 15px;" class="password-box-set-con-progress-left-col"><p :style="numLength == 1 ? { 'background': '#F8584D' } : {}"></p><caret-up-outlined /><span :style="numLength == 1 ? { 'color': '#F8584D' } : {}">弱</span></div><div class="password-box-set-con-progress-left-col"><p :style="numLength == 2 ? { 'background': '#FAB247' } : {}"></p><caret-up-outlined /><span :style="numLength == 2 ? { 'color': '#FAB247' } : {}">中</span></div><div class="password-box-set-con-progress-left-col"><p :style="numLength >= 3 ? { 'background': '#3AA679' } : {}"></p><caret-up-outlined /><span :style="numLength >= 3 ? { 'color': '#3AA679' } : {}">强</span></div></div><div class="password-box-set-con-progress-btn"><Button @click="">提交秘钥</Button></div></div></div></div></div></div>
</template>

CSS：

.InitializesSystemKey {position: fixed;bottom: 0;top: 50px;right: 0;left: 0;z-index: 999;width: 100vw;height: calc(100vh-50px);background: #f8f8f9;.password-box{position: absolute;top: 10%;left: 50%;// transform: translate(-50%, -50%);margin-left: -450px;width: 900px;height: 500px;&-title{display: flex;flex-direction: row;justify-content: space-between;span{color: #D91313;font-size: 40px;}}&-set{background: #fff;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);&-title{padding: 10px;border-bottom: 1px solid #E5E6EB;font-size: 20px;font-weight: 600;}&-con{display: flex;flex-direction: column;&-text{display: flex;flex-direction: row;justify-content: space-between;padding: 15px 10px;span{font-size: 16px;color: #1D2128;}}&-input{padding: 0 10px;position: relative;border-radius: 10px;// 让计数在边框内.counter {position: absolute;bottom: 10px;right: 20px;padding: 0 5px;}}&-rule{display: flex;flex-direction: row;justify-content: flex-start;padding: 10px;gap: 15px;span{margin-left: 2px;}.colorGreen{color: #3AA679;}.colorRed{color: #E53A2F;}}&-progress{border-top: 1px solid #E5E6EB;padding: 15px 0 10px;display: flex;flex-direction: row;justify-content: space-between;&-left{padding: 15px 0 10px;display: flex;flex-direction: row;gap: 5px;&-col{display: flex;flex-direction: column;align-items: center;p{width: 100px;height: 8px;background: #E5E6EB;margin: 0;}}}&-btn{margin: 10px 25px 0 0;}}}}}
}

JS逻辑：

import { onMounted, ref,computed} from 'vue';
import Button from '@/views/salary/components/button.vue';
const text = ref("请输入16~256位秘钥，需包含大小写、数字、特殊字符（仅支持以下字符：()`!@#$%^&*_-+=|{}[]:;'<>,.?")
const isEye =ref(true);
const inputVal = ref('');
const numLength = computed(() => {return [isLargeLetter.value, isSmallLetter.value, isNumber.value, isSpecSymbol.value,isLength.value].filter(Boolean).length;
})
const charCount = computed(() => {return inputVal.value.length;
})const isLargeLetter = ref(false);
const isSmallLetter = ref(false);
const isNumber = ref(false);
const isSpecSymbol = ref(false);
const isLength =ref(false);// input改变
const changeInput = (event)=>{const specialChars = "()`!@#$%^&*_-+=|{}[]:;'<>,.?";const escapedSpecialChars = specialChars.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');let key = event.target.value;if(!key){isLength.value = false;isLargeLetter.value = false;isSmallLetter.value = false;isNumber.value = false;isSpecSymbol.value = false;}// 长度if (key.length > 16 && key.length < 256) {isLength.value = true;}else{isLength.value = false;}// 数字if (/\d/.test(key)) {isNumber.value = true;}else{isNumber.value = false;}// 小写if (/[a-z]/.test(key)) {isSmallLetter.value = true;}else{isSmallLetter.value = false;}// 大写if (/[A-Z]/.test(key)) {isLargeLetter.value = true;}else{isLargeLetter.value = false;}// 特殊字符if (new RegExp(`[${escapedSpecialChars}]`).test(key)) {isSpecSymbol.value = true;}else{isSpecSymbol.value = false;}}
const emits = defineEmits(['clickReturn'])
const clickReturn = ()=>{emits('close');
}
onMounted(() => {});