欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能

 更新時(shí)間:2020年03月06日 08:07:53   作者:執(zhí)行力  
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過(guò)截圖實(shí)例代碼說(shuō)明給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

iview簡(jiǎn)介

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

1.背景

近期,在使用abp開(kāi)發(fā)項(xiàng)目過(guò)程中,前端vue輸入登錄密碼時(shí)默認(rèn)隱藏,但是如果用戶(hù)輸錯(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īng)其顯示還是隱藏狀態(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默認(rèn)情況是隱藏。

switchPassDisFlag:boolean=false

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

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

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

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

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

 

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

 

密碼隱藏狀態(tài)下,顯示閉眼圖標(biāo),跟密碼類(lèi)型,同時(shí)監(jiān)聽(tīng)眼睛圖標(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" 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)下,顯示睜眼圖標(biāo),跟text類(lèi)型,同時(shí)監(jiān)聽(tīng)眼睛圖標(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" 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 兩種眼睛圖標(biāo)(睜眼,閉眼)的監(jiān)聽(tīng)切換密碼顯示狀態(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)是無(wú)法監(jiān)聽(tīng)點(diǎn)擊事件的,而本文把icon圖標(biāo)用div標(biāo)簽包住,從而實(shí)現(xiàn)了點(diǎn)擊監(jiān)聽(tīng)。

總結(jié)

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

相關(guān)文章

  • 詳解在vue中如何實(shí)現(xiàn)屏幕錄制與直播推流功能

    詳解在vue中如何實(shí)現(xiàn)屏幕錄制與直播推流功能

    屏幕錄制和直播推流是現(xiàn)代Web應(yīng)用中常用的功能,Vue作為一種流行的JavaScript框架,提供了一些工具和庫(kù),可以方便地實(shí)現(xiàn)屏幕錄制和直播推流功能,本文將介紹如何在Vue中進(jìn)行屏幕錄制和直播推流,需要的朋友可以參考下
    2024-01-01
  • 淺談vue中$bus的使用和涉及到的問(wèn)題

    淺談vue中$bus的使用和涉及到的問(wèn)題

    這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • 詳解Vue3中shallowRef和shallowReactive的使用

    詳解Vue3中shallowRef和shallowReactive的使用

    這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下
    2022-07-07
  • vue3實(shí)現(xiàn)問(wèn)卷調(diào)查的示例代碼

    vue3實(shí)現(xiàn)問(wèn)卷調(diào)查的示例代碼

    本文主要介紹了vue3實(shí)現(xiàn)問(wèn)卷調(diào)查的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Vuex入門(mén)到上手教程

    Vuex入門(mén)到上手教程

    這篇文章主要介紹了Vuex入門(mén)到上手教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決

    Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決

    這篇文章主要介紹了Vue之關(guān)于Eslint自動(dòng)加分號(hào)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue-cli和v-charts實(shí)現(xiàn)可視化圖表過(guò)程解析

    vue-cli和v-charts實(shí)現(xiàn)可視化圖表過(guò)程解析

    這篇文章主要介紹了vue-cli和v-charts實(shí)現(xiàn)可視化圖表過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu)

    Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu)

    TypeScript 是JS的一個(gè)超級(jí),主要提供了類(lèi)型系統(tǒng)和對(duì)ES6的支持,使用 TypeScript 可以增加代碼的可讀性和可維護(hù)性,在 react 和 vue 社區(qū)中也越來(lái)越多人開(kāi)始使用TypeScript,這篇文章主要介紹了Vue3?攜手?TypeScript?搭建完整項(xiàng)目結(jié)構(gòu),需要的朋友可以參考下
    2022-04-04
  • 基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器

    基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器

    這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue封裝jquery修改自身及兄弟元素的方法

    vue封裝jquery修改自身及兄弟元素的方法

    本文主要介紹了vue封裝jquery修改自身及兄弟元素的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07

最新評(píng)論