lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

特性: 新增密码输入强度示例

This commit is contained in:
fifteen 2024-01-25 10:44:53 +08:00
parent ebc737b8bb
commit 3c106c5743
2 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/routers/modules/other.ts
View File

@ -103,6 +103,12 @@ const othersRouter = [
name: 'text-clamp', name: 'text-clamp',
meta: { title: '多行文本省略', icon: 'MenuIcon' }, meta: { title: '多行文本省略', icon: 'MenuIcon' },
}, },
{
path: '/other/pass-strength',
component: () => import('@/views/other/passStrength/index.vue'),
name: 'pass-strength',
meta: { title: '密码强度校验', icon: 'MenuIcon' },
},
], ],
}, },
] ]

46
src/views/other/passStrength/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<PageWrapLayout class="components-container">
<div class="m-pass-strength">
<el-card style="margin-bottom: 10px">
<template #header>
<span>密码强度示例</span>
</template>
<el-form :model="ruleForm" label-width="120px">
<el-form-item label="新的密码" prop="newPassword">
<inputStrength v-model="ruleForm.newPassword" strength placeholder="请输入新密码"></inputStrength>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<inputStrength v-model="ruleForm.confirmPassword" strength placeholder="请确认新密码"></inputStrength>
</el-form-item>
</el-form>
</el-card>
<el-descriptions title="配置项" :column="1" border class="descriptions">
<el-descriptions-item label="strength"> 是否显示密码强度，默认为 false </el-descriptions-item>
<el-descriptions-item label="value"> 双向绑定的 value 值，使用示例：v-model='passValue' </el-descriptions-item>
<el-descriptions-item label="常见场景">
<el-tag type="info">修改密码</el-tag> <el-tag type="info">用户注册</el-tag></el-descriptions-item
>
<el-descriptions-item label="参考地址">
<a href="https://github.com/zxcvbn-ts/zxcvbn" target="_blank">https://github.com/zxcvbn-ts/zxcvbn</a>
</el-descriptions-item>
</el-descriptions>
</div>
</PageWrapLayout>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import inputStrength from '@/components/InputStrength/index.vue'
const ruleForm = reactive({
newPassword: '',
confirmPassword: '',
})
</script>
<style lang="scss">
.m-pass-strength {
width: 100%;
height: 100%;
.descriptions {
margin-top: 50px;
}
}
</style>