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

這篇文章主要介紹了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監聽其顯示還是隱藏狀態。

<div >
 <div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-iivu-icon-ios-eye-off-outline ivu-input-iivu-input-icon-normal" ></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" > 
 </div>
 <div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-norm></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="text" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" > 
 </div>  
</div>

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

switchPassDisFlag:boolean=false

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

3.2 密碼隱藏狀態

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

使用圖標如下：

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

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

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

div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-off-outline ivu-input-icon ivu-input-icon-normal" ></i> 
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="password" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" > 
</div>

3.3 密碼顯示狀態

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

以便切換到閉眼狀態。

<div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outline ivu-input-icon ivu-input-icon-normal" ></i>
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="text" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" > 
</div>

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

SwitchPassDis()
 {
 this.switchPassDisFlag=!this.switchPassDisFlag; 
 }

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue基于iview如何實現登錄密碼的顯示與隱藏功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!