密码框的交互方式

本文探讨了密码框的交互方式,当密码为空时不显示眼睛图标。一旦开始输入密码,会显示带有斜杠的眼睛图标。用户长按眼睛图标可查看密码,斜杠消失,释放鼠标后密码隐藏,斜杠重新出现,确保了密码的安全展示与隐藏。
摘要由CSDN通过智能技术生成

密码为空时,不显示眼睛图标。输入密码时出现带斜杠的眼睛图标,鼠标长时间点击在眼睛图标上显示密码,且眼睛上的斜杠消失,松开鼠标密码隐藏,眼睛上出现斜杠。

<div >
          <el-dialog title="重置密码" :visible.sync="resetPasswordVisible" width="490px" @close="closeResetPassword">
          <el-form :rules="rules" ref="passwordForm" :model="passwordForm">
            <el-form-item label="密码"  :label-width="formLabelWidth"  prop="password">
              <el-input id="pwd" v-model.trim="passwordForm.password" type="password" placeholder="请输入长度为10-20位包含数字、字母、特殊字符的密码" >
                <i slot="suffix"
                  v-if="passwordForm.password.length>0"
                  class="el-input__icon el-icon-view el-show"
                  title=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值