<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 中文章来源：https://www.toymoban.com/news/detail-775215.html
switchPassword() {
this.showPassword = !this.showPassword;
}
图片素材
文章来源地址https://www.toymoban.com/news/detail-775215.html
到了这里，关于Element UI 密码输入框--可切换显示隐藏，自定义图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
