5月iOS設備好評榜：iPhone 14僅排第43？
來到新的一月，安兔兔的各個榜單又重新匯總了數據，像安卓陣營的榜單都有著比較大的變動，不過iOS由于設備的更新換代并沒有那么快，所以相對來說變化并不大，特別是iOS好評榜，老款設
平時我們在瀏覽各種網站和 APP 的時候，都接觸過密碼這個東西！
密碼設置的好不好，關乎到你的賬號安全性，越復雜的密碼越安全，所以密碼強度很重要，而我們在做注冊功能的時候，也有責任去幫協助用戶設置一個高密碼強度的密碼！
那么密碼強度怎么計算呢？ 且應該如何實現以下這樣的密碼強度動畫展示效果呢？
圖片
其實思路很簡單：
1、監聽密碼輸入框的變化。
2、密碼變化時，獲取密碼文本，并通過某種方式計算這個密碼的強度分數。
3、根據強度分數，改變下方塊的顏色和寬度。
0分：強度低，紅色，寬度 20%
1分：強度低，紅色，寬度 40%
2分：強度中，橙色，寬度 60%
3分：強度高，綠色，寬度 80%
4分：強度高，綠色，寬度 100%
圖片
用什么方式去計算密碼強度方式呢？我們可以用 @zxcvbn-ts/core這個庫來計算。
@zxcvbn-ts/core 是 zxcvbn 密碼強度估計器的 TypeScript 實現版本，用于幫助開發者評估用戶設置密碼的復雜度和安全性，計算的依據有：
pnpm i @zxcvbn-ts/core
圖片
計算了分數之后，我們需要根據分數去展示：
我們可以使用屬性選擇器的方式，去完成這一個效果，看以下代碼：
圖片
當密碼改變的時候，會實時計算密碼強度分數，這也就是意味著 data-score 這個屬性會一直變，接著我們可以在樣式中，去根據屬性選擇器去設置不同的顏色和寬度。
現在可以看到這樣的效果：
圖片
但是我們如果想實現分格的效果，可以借助偽元素去做。
現在可以達到我們期望的效果：
圖片
<template> <Input.Password v-model:value="password" autocomplete="none" /> <div class="strength-meter-bar"> <div class="strength-meter-bar--fill" :data-score="passwordStrength"></div> </div></template><script lang="ts" setup>import { Input } from 'ant-design-vue';import { computed, ref } from 'vue';import { zxcvbn } from '@zxcvbn-ts/core';const password = ref('');const passwordStrength = computed(() => { return zxcvbn(password.value).score;});</script><style lang="less">.strength-meter-bar { position: relative; height: 6px; margin: 10px auto 6px; border-radius: 6px; background-color: rgb(0 0 0 / 25%); // 增加的偽元素樣式代碼 &::before, &::after { content: ''; display: block; position: absolute; z-index: 10; width: 20%; height: inherit; border-width: 0 5px; border-style: solid; border-color: #fff; background-color: transparent; } &::before { left: 20%; } &::after { right: 20%; } // 增加的偽元素樣式代碼 &--fill { position: absolute; width: 0; height: inherit; transition: width 0.5s ease-in-out, background 0.25s; border-radius: inherit; background-color: transparent; &[data-score='0'] { width: 20%; background-color: darken(#e74242, 10%); } &[data-score='1'] { width: 40%; background-color: #e74242; } &[data-score='2'] { width: 60%; background-color: #efbd47; } &[data-score='3'] { width: 80%; background-color: fade(#55d187, 50%); } &[data-score='4'] { width: 100%; background-color: #55d187; } }}</style>
本文鏈接：http://www.tebozhan.com/showinfo-26-92112-0.html用戶被盜號了！為什么前端要被罵？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號