Element的input 实现带图标密码框的明密文(点击眼睛显示密码,再次点击图标隐藏密码)

更新: 新版本中,添加 show-password 属性,即可支持配置显示密码按钮;详情见:https://element.eleme.cn/#/zh-CN/component/changeloghttps://element.eleme.cn/#/zh-CN/component/input

点击眼睛图标显示密码,再次点击图标隐藏密码

这里只是在提供一种思路,请按各自需求自行更改。

一、知识点:

  1. icon 的输入框,可以通过 prefix-iconsuffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
  2. 因为图标涉及点击事件,带 icon 的输入框,采用的是 slot 方式。
  3. slot="suffix" 表示,图标会出现在input 的尾部;

二、实现思路

  1. 要变化的有,图标样式和input的显示方式
  2. 定义一个flag默认false,绑定input 的type值,flag为true时,type为 text 类型(可以看见数字,实现显示密码),否则为 password 类型(隐藏密码)
  3. 图标随之改变,也需绑定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>

在这里插入图片描述
在这里插入图片描述

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值