<el-form-item prop="password">
<el-input
@keyup.enter.native="login"
placeholder="密碼"
v-model="formData.password"
:type="showPassword ? 'text' : 'password'"
>
<i slot="suffix" @click="switchPassword">
<img
v-if="showPassword"
class="input_icon"
src="@/assets/icons/password_show.png"
/>
<img
v-else
class="input_icon"
src="@/assets/icons/password_hide.png"
/>
</i>
</el-input>
</el-form-item>
.input_icon {
cursor: pointer;
width: 24px;
padding-top: 8px;
padding-right: 6px;
}
data 中
// 是否顯示密碼
showPassword: false,
methods 中文章來源：http://www.zghlxwxcb.cn/news/detail-775215.html
switchPassword() {
this.showPassword = !this.showPassword;
}
圖片素材
文章來源地址http://www.zghlxwxcb.cn/news/detail-775215.html
到了這里，關(guān)于Element UI 密碼輸入框--可切換顯示隱藏，自定義圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
