Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能
iview簡介
iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產(chǎn)品。
1.背景
近期，在使用abp開發(fā)項目過程中，前端vue輸入登錄密碼時默認隱藏，但是如果用戶輸錯密碼需要切換顯示跟隱藏。故有此文。
2.實現(xiàn)最終效果
2.1 隱藏密碼
2.2 顯示密碼
顯示密碼需要點擊密碼框左側眼睛
3.實現(xiàn)思路
3.1 v-if判斷當前密碼顯示狀態(tài)
密碼輸入框跟密碼圖標最外層用Div標簽包住，并且用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" style="left:0"></i>
</div>
<input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" 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')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0">
</div>
</div>
定義顯示狀態(tài)值switchPassDisFlag默認情況是隱藏。
switchPassDisFlag:boolean=false
這里用得是typescript強類型，所以需要定義成boolean類型，之所以定義成boolean類型是為了下面監(jiān)聽圖標點擊事件中狀態(tài)取反方便。
3.2 密碼隱藏狀態(tài)
使用Div標簽包住圖標跟密碼輸入框，并且設置閉眼圖標，輸入框類型為password。
使用圖標如下：
選中Iview頁面的圖標菜單如下圖
選中如下圖的兩只眼睛即可
密碼隱藏狀態(tài)下，顯示閉眼圖標，跟密碼類型，同時監(jiā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" style="left:0"></i>
</div>
<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">
</div>
3.3 密碼顯示狀態(tài)
密碼顯示狀態(tài)下，顯示睜眼圖標，跟text類型，同時監(jiā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" style="left:0"></i>
</div>
<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">
</div>
3.4 兩種眼睛圖標（睜眼，閉眼）的監(jiān)聽切換密碼顯示狀態(tài)事件
SwitchPassDis()
{
this.switchPassDisFlag=!this.switchPassDisFlag;
}
4.小結
本文不需要引入圖片，方便的利用了iview的睜閉眼圖標；
利用了vue中 v-if,v-else直接面向標簽（即顯示數(shù)據(jù)）編程；
靈活利用了div標簽，因為iview的icon圖標是無法監(jiān)聽點擊事件的，而本文把icon圖標用div標簽包住，從而實現(xiàn)了點擊監(jiān)聽。
總結
到此這篇關于Vue基于iview實現(xiàn)登錄密碼的顯示與隱藏功能的文章就介紹到這了,更多相關vue 登錄密碼顯示隱藏內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Vue中使用動態(tài)import()語法動態(tài)加載組件
在Vue中,你可以使用動態(tài)import()語法來動態(tài)加載組件,動態(tài)導入允許你在需要時異步加載組件,這樣可以提高應用程序的初始加載性能,本文給大家介紹在Vue中使用動態(tài)import()語法動態(tài)加載組件,感興趣的朋友一起看看吧2023-11-11
在 Vue3 中如何使用 styled-components
styled-components 的官方 Vue 版本目前已多年沒有更新,而且只支持到 Vue2,那么,在 Vue3 中怎么才能使用到 styled-components 呢,下面給大家介紹在 Vue3 中使用 styled-components的相關知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 限制input只能輸入正數(shù)的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue?Loader?作為一個?webpack?的?Loader,扮演著將?.vue?文件轉化為瀏覽器可執(zhí)行代碼的角色,下面就跟隨小編一起深入了解Vue?Loader?的技術細節(jié)與工作機制吧2024-12-12
vuejs使用axios異步訪問時用get和post的實例講解
今天小編就為大家分享一篇vuejs使用axios異步訪問時用get和post的實例講解，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)進度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue過濾器可以在不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進行加工處理后返回過濾后的數(shù)據(jù)再進行調用處理,下面這篇文章主要給大家介紹了關于Vue中過濾器必懂小知識的相關資料,需要的朋友可以參考下2021-10-10
vue打包部署到springboot并通過tomcat運行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過tomcat運行的操作方法,本文通過實例圖文并茂的形式給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05