记录一次element 二次封装的密码输入安全等级显示

<template>
	<div>
		<el-input :type="type" v-model="localValue" @input="onInput" :placeholder="placeholder" autocomplete="off" 
		:maxlength="maxlength" show-password>
		</el-input>
		<div class="pasTips" v-if="pastips">
			<span :class="{'opcity':isopcity == 1}">弱</span> <span :class="{'opcity':isopcity == 2}">中</span> <span :class="{'opcity':isopcity == 3}">强</span>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: "passwordInput",
		props: {
			//传进来的value值，只显示不修改
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			maxlength:{
				type: Number,
				default: 18
			},
			pastips:{
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				// 获取props中value的值，并与el-input绑定，过程中不修改props中value的值，保证了单向数据流原则
				localValue: this.value,
				isopcity: 0,
				type: 'password'
			}
		},
		methods: {
			onInput(e) {
				this.$emit('input', e)
				let $test = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,30}$/;
				let $test1 = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+){6,12}$/;   //  弱：纯数字，纯字母，纯特殊字符
				let $test2 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;   //中：字母+数字，字母+特殊字符，数字+特殊字符
				let $test3 = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;   //强：字母+数字+特殊字符
				if(e.length < 1){ this.isopcity = 0; return;}
				if($test1.test(e)){
					this.isopcity = 1
					if($test.test(e)){
						if($test2.test(e)){
							this.isopcity = 2
							if($test3.test(e)){
								this.isopcity = 3
							}
						}
					}
				}else{//没满足  弱  条件就依旧显示红色
					this.isopcity = 1
				}
			}
		},
	}
</script>

<style>
</style>

使用

<paddwordinput v-model="userForm.password" :pastips='true'></paddwordinput>