Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問(wèn)題的解決方法
問(wèn)題描述
通常情況下，瀏覽器會(huì)默認(rèn)將已保存的賬號(hào)密碼 填充到 input type 值為password的輸入框內(nèi)，如果在登錄頁(yè)面，這當(dāng)然是非常好的，自動(dòng)填充密碼可以節(jié)約時(shí)間，提高良好的使用體驗(yàn)，這樣當(dāng)然是沒(méi)有什么問(wèn)題的
但是如果在注冊(cè)頁(yè)面、新增賬號(hào)等頁(yè)面，這種操作 就是超出需求了（有點(diǎn)多此一舉）
<div class="main-side">
<div class="login-location">
<!-- $refs.pass.focus() 按下回車(chē) 自動(dòng)聚焦 密碼框 -->
<el-input
@keyup.enter.native="$refs.pass.focus()"
v-model="account"
placeholder="用戶名">
</el-input>
</div>
<div class="login-location">
<el-input
ref="pass"
@keyup.enter.native="userLogin()"
v-model="password"
type="password"
placeholder="密碼">
</el-input>
</div>
</div>
解決方法
auto-complete="new-password"
在 type 為 passworld 的 input 中加 auto-complete="new-password" 屬性即可
添加一個(gè)類(lèi)
給密碼框加入一個(gè) class，之后寫(xiě) css
/deep/
使用了外屆的組件或者自己開(kāi)發(fā)一個(gè)組件，修改一處就可能會(huì)影響到用這個(gè)組件的所有樣式，所以就需要有一個(gè)方法或者方式，既不影響到別的地方，又能修改子組件在當(dāng)前的樣式。/deep/ 就能實(shí)現(xiàn)，這樣就不會(huì)影響項(xiàng)目里使用這個(gè)公共組件的其他地方的樣式
.新加的類(lèi) {
/deep/ .el-input__inner {
-webkit-text-security:disc!important;
}
}總結(jié)
到此這篇關(guān)于Element中el-input密碼輸入框?yàn)g覽器自動(dòng)填充賬號(hào)密碼問(wèn)題解決的文章就介紹到這了,更多相關(guān)Element el-input密碼輸入框自動(dòng)填充內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vscode自定義vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue3基于elementplus 簡(jiǎn)單實(shí)現(xiàn)表格二次封裝過(guò)程
公司渲染表格數(shù)據(jù)時(shí)需要將空數(shù)據(jù)顯示‘-’,并且對(duì)于每一列數(shù)據(jù)的顯示也有一定的要求,基于這個(gè)需求對(duì)element-plus簡(jiǎn)單進(jìn)行了二次封裝,這篇文章主要介紹了vue3基于elementplus 簡(jiǎn)單實(shí)現(xiàn)表格二次封裝過(guò)程,需要的朋友可以參考下2024-05-05
Vue全局事件總線$bus安裝與應(yīng)用小結(jié)
這篇文章主要介紹了Vue全局事件總線$bus安裝與應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue2與vue3中獲取模版引用ref的方法與區(qū)別,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue通過(guò)elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到通過(guò)點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
Vue中使用JWT進(jìn)行身份認(rèn)證也是一種常見(jiàn)的方式,它能夠更好地保護(hù)用戶的信息,本文主要介紹了Vue開(kāi)發(fā)中Jwt的使用詳解,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
Vue中使用Element的Table組件實(shí)現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實(shí)現(xiàn)嵌套表格,通過(guò)type="expand"設(shè)置了一個(gè)展開(kāi)按鈕,點(diǎn)擊該按鈕會(huì)顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容,感興趣的可以了解一下2024-01-01
vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問(wèn)題講解，詳細(xì)代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
Vue3的Effect是其響應(yīng)式系統(tǒng)的核心,負(fù)責(zé)依賴(lài)追蹤和自動(dòng)響應(yīng),它通過(guò)ReactiveEffect類(lèi)封裝副作用邏輯,實(shí)現(xiàn)依賴(lài)收集和觸發(fā)更新,本文介紹vue?3?effect作用與原理解析,感興趣的朋友一起看看吧2025-02-02