Vue基于iview實現登錄密碼的顯示與隱藏功能

iview簡介

iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產品。

1.背景

近期，在使用abp開發項目過程中，前端vue輸入登錄密碼時默認隱藏，但是如果用戶輸錯密碼需要切換顯示跟隱藏。故有此文。

2.實現最終效果

2.1 隱藏密碼

2.2 顯示密碼

顯示密碼需要點擊密碼框左側眼睛

3.實現思路

3.1 v-if判斷當前密碼顯示狀態

密碼輸入框跟密碼圖標最外層用Div標簽包住，并且用vue的v-if v-else監聽其顯示還是隱藏狀態。

1. <div >
2. <div v-if="switchPassDisFlag">
3. <div v-on:click="SwitchPassDis">
4. <i class="ivu-iivu-icon-ios-eye-off-outline ivu-input-iivu-input-icon-normal" style="left:0"></i>
5. </div>
6. <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password":placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0">
7. </div>
8. <div v-else>
9. <div v-on:click="SwitchPassDis">
10. <i class="ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-normstyle="left:0"></i>
11. </div>
12. <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="text":placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0">
13. </div>
14. </div>
15.  

定義顯示狀態值switchPassDisFlag默認情況是隱藏。

switchPassDisFlag:boolean=false

這里用得是typescript強類型，所以需要定義成boolean類型，之所以定義成boolean類型是為了下面監聽圖標點擊事件中狀態取反方便。

3.2 密碼隱藏狀態

使用Div標簽包住圖標跟密碼輸入框，并且設置閉眼圖標，輸入框類型為password。

使用圖標如下：

選中Iview頁面的圖標菜單如下圖

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

密碼隱藏狀態下，顯示閉眼圖標，跟密碼類型，同時監聽眼睛圖標的點擊事件，以便切換到睜眼狀態（即密碼顯示狀態）。

1. div v-if="switchPassDisFlag">
2. <div v-on:click="SwitchPassDis">
3. <i class="ivu-icon ivu-icon-ios-eye-off-outline ivu-input-icon ivu-input-icon-normal"style="left:0"></i>
4. </div>
5. <input v-model="loginModel.password" autocomplete="off" spellcheck="false"type="password" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large"style="padding-left:32px;padding-right:0">
6. </div>

3.3 密碼顯示狀態

密碼顯示狀態下，顯示睜眼圖標，跟text類型，同時監聽眼睛圖標的點擊事件，

以便切換到閉眼狀態。

1. <div v-else>
2. <div v-on:click="SwitchPassDis">
3. <i class="ivu-icon ivu-icon-ios-eye-outline ivu-input-icon ivu-input-icon-normal"style="left:0"></i>
4. </div>
5. <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="text":placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0">
6. </div>

3.4 兩種眼睛圖標（睜眼，閉眼）的監聽切換密碼顯示狀態事件

1. SwitchPassDis()
2. {
3. this.switchPassDisFlag=!this.switchPassDisFlag;
4. }

4.小結

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

利用了vue中 v-if,v-else直接面向標簽（即顯示數據）編程；

靈活利用了div標簽，因為iview的icon圖標是無法監聽點擊事件的，而本文把icon圖標用div標簽包住，從而實現了點擊監聽。

總結

到此這篇關于Vue基于iview實現登錄密碼的顯示與隱藏功能的文章就介紹到這了,更多相關vue 登錄密碼顯示隱藏內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們！