iview簡介

iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。

1.背景

近期，在使用abp開發(fā)項(xiàng)目過程中，前端vue輸入登錄密碼時(shí)默認(rèn)隱藏，但是如果用戶輸錯(cuò)密碼需要切換顯示跟隱藏。故有此文。

2.實(shí)現(xiàn)最終效果2.1 隱藏密碼

2.2 顯示密碼

顯示密碼需要點(diǎn)擊密碼框左側(cè)眼睛

3.實(shí)現(xiàn)思路3.1 v-if判斷當(dāng)前密碼顯示狀態(tài)

密碼輸入框跟密碼圖標(biāo)最外層用Div標(biāo)簽包住，并且用vue的v-if v-else監(jiān)聽其顯示還是隱藏狀態(tài)。

<div > <div v-if='switchPassDisFlag'> <div v-on:click='SwitchPassDis'> <i style='left:0'></i> </div> <input v-model='loginModel.passwoautocomplete='off' spellcheck='faltype='password' :placeholde(’PasswordPlaceholder’)' style='padding-left:3padding-right:0'> </div> <div v-else> <div v-on:click='SwitchPassDis'> <i class='ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-normstyle='left:0'></i> </div> <input v-model='loginModel.passwoautocomplete='off' spellcheck='faltype='text' :placeholde(’PasswordPlaceholder’)' style='padding-left:3padding-right:0'> </div> </div>

定義顯示狀態(tài)值switchPassDisFlag默認(rèn)情況是隱藏。

switchPassDisFlag:boolean=false

這里用得是typescript強(qiáng)類型，所以需要定義成boolean類型，之所以定義成boolean類型是為了下面監(jiān)聽圖標(biāo)點(diǎn)擊事件中狀態(tài)取反方便。

3.2 密碼隱藏狀態(tài)

使用Div標(biāo)簽包住圖標(biāo)跟密碼輸入框，并且設(shè)置閉眼圖標(biāo)，輸入框類型為password。

使用圖標(biāo)如下：

選中Iview頁面的圖標(biāo)菜單如下圖

選中如下圖的兩只眼睛即可

密碼隱藏狀態(tài)下，顯示閉眼圖標(biāo)，跟密碼類型，同時(shí)監(jiān)聽眼睛圖標(biāo)的點(diǎn)擊事件，以便切換到睜眼狀態(tài)（即密碼顯示狀態(tài)）。

div v-if='switchPassDisFlag'> <div v-on:click='SwitchPassDis'> <i style='left:0'></i> </div> <input v-model='loginModel.password' autocomplete='off' spellcheck='false' type='password' :placeholder='L(’PasswordPlaceholder’)' style='padding-left:32px;padding-right:0'> </div>3.3 密碼顯示狀態(tài)

密碼顯示狀態(tài)下，顯示睜眼圖標(biāo)，跟text類型，同時(shí)監(jiān)聽眼睛圖標(biāo)的點(diǎn)擊事件，

以便切換到閉眼狀態(tài)。

<div v-else> <div v-on:click='SwitchPassDis'> <i style='left:0'></i> </div> <input v-model='loginModel.password' autocomplete='off' spellcheck='false' type='text' :placeholder='L(’PasswordPlaceholder’)' style='padding-left:32px;padding-right:0'> </div>3.4 兩種眼睛圖標(biāo)（睜眼，閉眼）的監(jiān)聽切換密碼顯示狀態(tài)事件

SwitchPassDis() { this.switchPassDisFlag=!this.switchPassDisFlag; }4.小結(jié)

本文不需要引入圖片，方便的利用了iview的睜閉眼圖標(biāo)；

利用了vue中 v-if,v-else直接面向標(biāo)簽（即顯示數(shù)據(jù)）編程；

靈活利用了div標(biāo)簽，因?yàn)閕view的icon圖標(biāo)是無法監(jiān)聽點(diǎn)擊事件的，而本文把icon圖標(biāo)用div標(biāo)簽包住，從而實(shí)現(xiàn)了點(diǎn)擊監(jiān)聽。

總結(jié)

到此這篇關(guān)于Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能的文章就介紹到這了,更多相關(guān)vue 登錄密碼顯示隱藏內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！