first commit

2025-12-26 23:19:09 +08:00
commit b29d128e41
788 changed files with 100922 additions and 0 deletions
--- a/src/components/StrengthMeter/index.vue
+++ b/src/components/StrengthMeter/index.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="prefixCls relative" style="width: 100%">
+		<el-input v-model="innerValueRef" v-bind="$attrs" type="password" show-password @change="handleChange" style="width: 100%">
+			<template #[item]="data" v-for="item in Object.keys($slots)">
+				<slot :name="item" v-bind="data || {}"></slot>
+			</template>
+		</el-input>
+		<div class="prefixCls-bar">
+			<div class="prefixCls-bar--fill" :data-score="getPasswordStrength"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="StrengthMeter">
+import { verifyPasswordStrength } from '/@/utils/toolsValidate';
+const props = defineProps({
+	value: {
+		type: String,
+	},
+	showInput: {
+		type: Boolean,
+		default: () => {
+			return true;
+		},
+	},
+	disabled: {
+		type: Boolean,
+	},
+});
+
+const emit = defineEmits(['score', 'change', 'update:value']);
+
+// 计算密码强度
+const getPasswordStrength = computed(() => {
+	const { disabled } = props;
+	if (disabled) return -1;
+	const innerValue = unref(innerValueRef);
+	const score = innerValue ? verifyPasswordStrength(innerValue) : -1;
+	emit('score', score);
+	return score;
+});
+
+const innerValueRef = ref();
+
+const handleChange = (e: any) => {
+	innerValueRef.value = e;
+};
+
+watchEffect(() => {
+	innerValueRef.value = props.value || '';
+});
+
+watch(
+	() => unref(innerValueRef),
+	(val) => {
+		emit('update:value', val);
+		emit('change', val);
+	}
+);
+</script>
+
+<style scoped lang="scss">
+.prefixCls {
+	&-bar {
+		position: relative;
+		height: 6px;
+		margin: 10px auto 6px;
+		background-color: grey;
+		border-radius: 6px;
+
+		&::before,
+		&::after {
+			position: absolute;
+			z-index: 10;
+			display: block;
+			width: 33%;
+			height: inherit;
+			background-color: transparent;
+			border-color: white;
+			border-style: solid;
+			border-width: 0 5px;
+			content: '';
+		}
+
+		&::before {
+			left: 33%;
+		}
+		//
+		//&::after {
+		//	right: 33%;
+		//}
+
+		&--fill {
+			position: absolute;
+			width: 0;
+			height: inherit;
+			background-color: transparent;
+			border-radius: inherit;
+			transition: width 0.5s ease-in-out, background 0.25s;
+
+			&[data-score='1'] {
+				width: 33%;
+				background-color: var(--el-color-danger);
+			}
+
+			&[data-score='2'] {
+				width: 67%;
+				background-color: var(--el-color-warning);
+			}
+
+			&[data-score='3'] {
+				width: 100%;
+				background-color: var(--el-color-success);
+			}
+		}
+	}
+}
+</style>