更新:
新版本中,添加 show-password 属性,即可支持配置显示密码按钮;详情见:https://element.eleme.cn/#/zh-CN/component/changelog 和 https://element.eleme.cn/#/zh-CN/component/input
点击眼睛图标显示密码,再次点击图标隐藏密码
这里只是在提供一种思路,请按各自需求自行更改。
一、知识点:
- 带
icon
的输入框,可以通过prefix-icon
和suffix-icon
属性在input
组件首部和尾部增加显示图标,也可以通过slot
来放置图标。 - 因为图标涉及点击事件,带
icon
的输入框,采用的是slot
方式。 slot="suffix"
表示,图标会出现在input 的尾部;
二、实现思路
- 要变化的有,图标样式和input的显示方式
- 定义一个
flag
默认false,绑定input 的type值,flag为true时,type为text
类型(可以看见数字,实现显示密码),否则为password
类型(隐藏密码) - 图标随之改变,也需绑定class,点击图标时,改变
flag
的值
<template>
<div class="login-container">
<el-input
v-model="pwd"
:type="type"
class="pwd-input"
placeholder="请输入密码"
>
<i
slot="suffix"
class="icon-style"
:class="elIcon"
autocomplete="auto"
@click="flag = !flag"
/>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
pwd: "123456",
flag: false
};
},
computed: {
type() {
return this.flag ? "text" : "password";
},
elIcon() {
return this.flag ? "el-icon-minus" : "el-icon-view";
}
}
};
</script>
<style>
.icon-style {
margin-top: 8px;
font-size: 18px;
}
.pwd-input {
border: 1px solid #fff;
width: 250px;
}
</style>