46 lines
1.7 KiB
Plaintext
46 lines
1.7 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" message="密码强度校验组件">
|
||
<template #description>
|
||
用于常用密码强度设置，通常要求比较严格一点密码适用，验证，灵活配置，脱离 Form
|
||
单独使用也可以哦~
|
||
</template>
|
||
</a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<a-alert message="基础效果" type="info"
|
||
><template #description>密码长度，6-32，复杂密码</template>
|
||
</a-alert>
|
||
<Password class="mt-4" />
|
||
|
||
<a-alert message="设定密码长度" type="info"
|
||
><template #description>比如来个，( 12 - 16 个字符 )</template>
|
||
</a-alert>
|
||
<Password :min-length="12" :max-length="16" class="mt-4" />
|
||
|
||
<a-alert message="简单密码" type="info"
|
||
><template #description>不需要满足字母、数字及特殊字符两种或以上组合条件</template>
|
||
</a-alert>
|
||
<Password class="mt-4" :complexity="false" />
|
||
|
||
<a-alert message="自定义密码强度等级提示语" type="info">
|
||
<template #description
|
||
>支持4个等级配置，1 - 4 默认4个等级名称分别为： 1. 弱不禁风 2. 平淡无奇 3. 出神入化 4.
|
||
登峰造极</template
|
||
>
|
||
</a-alert>
|
||
<Password class="mt-4" :level="{ 1: '很Low', 2: '一般Low', 3: '没那么Low', 4: '不Low了' }" />
|
||
|
||
<a-alert message="再次确认密码" type="info" />
|
||
<Password :repeat="true" class="mt-4" />
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { Password } from '@/components/Password';
|
||
</script>
|
||
|
||
<style lang="less"></style>
|