61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<div class="password-tip">
|
|
<div>
|
|
<el-icon>
|
|
<CloseBold v-if="validateLength(value)" />
|
|
<Select v-else />
|
|
</el-icon>
|
|
<span>{{ $t('Login.passwordLengthError', { min: 6, max: 20 }) }}</span>
|
|
</div>
|
|
<div>
|
|
<el-icon>
|
|
<CloseBold v-if="validateSpecial(value)" />
|
|
<Select v-else />
|
|
</el-icon>
|
|
<span>{{ $t('Login.passwordSpecial') }}</span>
|
|
</div>
|
|
<div>
|
|
<el-icon>
|
|
<CloseBold v-if="validateCase(value)" />
|
|
<Select v-else />
|
|
</el-icon>
|
|
<span>{{ $t('Login.passwordCase') }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref } from 'vue'
|
|
import { Select, CloseBold } from '@element-plus/icons-vue'
|
|
import { validateLength, validateSpecial, validateCase } from './tools'
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.password-tip {
|
|
background: #404040;
|
|
color: #fff;
|
|
font-size: 1.1rem;
|
|
padding: 1.5rem;
|
|
border-radius: 1.5rem;
|
|
line-height: normal;
|
|
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
> .el-icon {
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|