密码框的交互方式

最新推荐文章于 2023-12-25 16:07:29 发布

菜鸟凯一枚

最新推荐文章于 2023-12-25 16:07:29 发布

阅读量707

点赞数

分类专栏： Vue前端文章标签：密码框的交互

本文链接：https://blog.csdn.net/qq_37782076/article/details/85273928

版权

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

摘要由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=