這篇文章主要介紹了Vue基于iview如何實(shí)現(xiàn)登錄密碼的顯示與隱藏功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供麻江企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、H5建站、小程序制作等業(yè)務(wù)。10年已為麻江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

iview簡介

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

1.背景

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

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 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>

定義顯示狀態(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)，跟密碼類型，同時監(jiān)聽眼睛圖標(biāo)的點(diǎn)擊事件，以便切換到睜眼狀態(tài)（即密碼顯示狀態(tài)）。

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 密碼顯示狀態(tài)

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

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

<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 兩種眼睛圖標(biāo)（睜眼，閉眼）的監(jiān)聽切換密碼顯示狀態(tài)事件

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

為什么要使用Vue

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue基于iview如何實(shí)現(xiàn)登錄密碼的顯示與隱藏功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

文章題目：Vue基于iview如何實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
文章出自：http://chinadenli.net/article4/ihodie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App開發(fā)、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)