vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能
更新時間：2020年01月18日 11:55:07 作者：weixin_34075551
這篇文章主要介紹了vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能,需本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化（js一共三行代碼，其中一行為了美觀）...，先給大家展示下效果圖，感覺不錯可以參考實現(xiàn)代碼。
【效果圖】
【html】
// 前后代碼【略】 <el-form-item label="密碼" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="請輸入密碼" @keyup.enter.native="login"> <i slot="suffix" class="el-icon-view" @click="showPwd"></i> </el-input> </el-form-item>
【js】
showPwd () {
this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';
let e = document.getElementsByClassName('el-icon-view')[0];
this.pwdType == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},
ps:下面看下vue+element-ui實現(xiàn)顯示隱藏密碼
<template>
<el-form :model="cuser_info" label-width="115px" label-position="left" >
<el-row :gutter="20">
<el-col :span="24">
<el-form-item v-if="visible2" label="確認密碼" prop="confirm_pwd">
<el-input type="password" v-model="cuser_info.confirm_pwd" placeholder="請再次輸入密碼">
<i slot="suffix" title="顯示密碼" @click="changePass('show',2)" style="cursor:pointer;"
class="iconfont icon-xianshizy"></i>
</el-input>
</el-form-item>
<el-form-item v-else label="確認密碼" class="is-required" prop="confirm_pwd">
<el-input type="text" v-model="cuser_info.confirm_pwd" placeholder="請再次輸入密碼">
<i slot="suffix" title="隱藏密碼" @click="changePass('hide',2)" style="cursor:pointer;"
class="iconfont icon-yincangby"></i>
</el-input>
</el-form-item>
</el-col>
</el-form>
</template>
<script>
export default {
name: "AddC_user",
data(){
return{
cuser_info:{
confirm_pwd:'',
},
visible2: true,
}
},
methods:{
//控制密碼顯示隱藏
changePass(value,kind) {
this.visible2 = !(value === 'show');
},
},
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue+elementUi 實現(xiàn)密碼顯示/隱藏+小圖標變化功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法
這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Vscode如何創(chuàng)建vue項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了使用vue和element-ui上傳圖片及視頻文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了element-ui 本地化使用教程詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本篇文章主要介紹了vue2.0之多頁面的開發(fā)的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實現(xiàn)菜單導(dǎo)航,通過點擊菜單項來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細的代碼示例,需要的朋友可以參考下2023-04-04
AntV?組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01