直播賣貨系統,實現自定義輸入密碼強度顯示特效

2021-10-21 17:13:47 字數 1168 閱讀 2238

直播賣貨系統,實現自定義輸入密碼強度顯示特效實現的相關**

1.業務需求:

vue專案輸入使用者密碼時動態顯示輸入密碼的強度(若,中,強),且顯示對應顏色(紅,橙,綠),如果引用的是elementui,那麼可以使用el-progress元件完成此效果。

2.解決方案:

html引入el-progress元件(show-text:是否顯示內容,percentage:進度百分值,text-inside:內容顯示在進度條內,stroke-width:進度條高,format:自定義內容,color:自定義顏色,status:設定狀態):

<

el-progress

:show-text

="true"

:percentage

="pwdpercentage"

:text-inside

="true"

:stroke-width

="12"

:format

="pwdformatf"

:color

="pwdcolorf"

>

<

/el-progress

>

js對應函式:

//

設定分割值if(

pwdpercentage

.length

>0&

&pwdpercentage

.length

<7)

elseif(

pwdpercentage

.length

>6&

&pwdpercentage

.length

<17)

elseif(

pwdpercentage

.length

>16&

&pwdpercentage

.length

<=30

)else

//

動態顯示指定內容

pwdformatf

(pwdpercentage),

//動態改變顏色

pwdcolorf

(pwdpercentage

),

Android自定義密碼輸入框

最近朋友諮詢了乙個 輸入框,檢視了以前 現在重新整理了一下,將輸入框的邊框顏色,字型顏色,分割線顏色都抽出來了,方便不同需求的設定。先看看效果圖 由於比較簡單,所以直接檢視 吧,import android.content.context import android.content.res.typ...

android 自定義鍵盤輸入密碼控制項

直接上 public class pwdinputview extends relativelayout public pwdinputview context context,attributeset attrs mgridview gridview mview.findviewbyid r.id...

直播系統原始碼Android 自定義漂亮的圓形進度條

一.自定義view,只有畫筆 paint 操作 public class circlebarview extends view public circlebarview context context,nullable attributeset attrs 屬性 private void inita...