掘力計(jì)劃第 20 期：Flutter 混合開發(fā)的混亂之治
在掘力計(jì)劃系列活動(dòng)第20場(chǎng)，《Flutter 開發(fā)實(shí)戰(zhàn)詳解》作者，掘金優(yōu)秀作者，Github GSY 系列目負(fù)責(zé)人戀貓的小郭分享了Flutter 混合開發(fā)的混亂之治。Flutter 基于自研的 Skia 引擎
平時(shí)我們?cè)跒g覽各種網(wǎng)站和 APP 的時(shí)候，都接觸過密碼這個(gè)東西！
密碼設(shè)置的好不好，關(guān)乎到你的賬號(hào)安全性，越復(fù)雜的密碼越安全，所以密碼強(qiáng)度很重要，而我們?cè)谧鲎?cè)功能的時(shí)候，也有責(zé)任去幫協(xié)助用戶設(shè)置一個(gè)高密碼強(qiáng)度的密碼！
那么密碼強(qiáng)度怎么計(jì)算呢？ 且應(yīng)該如何實(shí)現(xiàn)以下這樣的密碼強(qiáng)度動(dòng)畫展示效果呢？
圖片
其實(shí)思路很簡(jiǎn)單：
1、監(jiān)聽密碼輸入框的變化。
2、密碼變化時(shí)，獲取密碼文本，并通過某種方式計(jì)算這個(gè)密碼的強(qiáng)度分?jǐn)?shù)。
3、根據(jù)強(qiáng)度分?jǐn)?shù)，改變下方塊的顏色和寬度。
0分：強(qiáng)度低，紅色，寬度 20%
1分：強(qiáng)度低，紅色，寬度 40%
2分：強(qiáng)度中，橙色，寬度 60%
3分：強(qiáng)度高，綠色，寬度 80%
4分：強(qiáng)度高，綠色，寬度 100%
圖片
用什么方式去計(jì)算密碼強(qiáng)度方式呢？我們可以用 @zxcvbn-ts/core這個(gè)庫(kù)來計(jì)算。
@zxcvbn-ts/core 是 zxcvbn 密碼強(qiáng)度估計(jì)器的 TypeScript 實(shí)現(xiàn)版本，用于幫助開發(fā)者評(píng)估用戶設(shè)置密碼的復(fù)雜度和安全性，計(jì)算的依據(jù)有：
pnpm i @zxcvbn-ts/core
圖片
計(jì)算了分?jǐn)?shù)之后，我們需要根據(jù)分?jǐn)?shù)去展示：
我們可以使用屬性選擇器的方式，去完成這一個(gè)效果，看以下代碼：
圖片
當(dāng)密碼改變的時(shí)候，會(huì)實(shí)時(shí)計(jì)算密碼強(qiáng)度分?jǐn)?shù)，這也就是意味著 data-score 這個(gè)屬性會(huì)一直變，接著我們可以在樣式中，去根據(jù)屬性選擇器去設(shè)置不同的顏色和寬度。
現(xiàn)在可以看到這樣的效果：
圖片
但是我們?nèi)绻雽?shí)現(xiàn)分格的效果，可以借助偽元素去做。
現(xiàn)在可以達(dá)到我們期望的效果：
圖片
<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用戶被盜號(hào)了！為什么前端要被罵？
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)