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