点击眼睛图标显示密码,再次点击图标隐藏密码
一、知识点:
带 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="[flag?'text':'password']" style="border:1px solid #fff;width:250px;" placeholder="请输入密码">
<i slot="suffix" :class="[flag?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag=!flag" />
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
pwd: '123456',
flag: false
}
}
}
</script>
说明:
1、转载地址:https://blog.csdn.net/ddx2019/article/details/106861480/
2、如果type那里报错,把方括号去掉