vue实现密码显示与隐藏的最简方法

Jeri小红薯

已于 2022-04-15 11:57:24 修改

阅读量7.7k

点赞数 2

分类专栏： vue elementui 文章标签： vue elementui

于 2022-04-07 10:31:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43557758/article/details/124007074

版权

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

vue实现密码显示与隐藏的最简方法

更新踩坑：

在element-ui中：

2.15.17版本以前，type=“password”类型的input在输入内容后会自动显示小眼睛
在目前最新版本2.15.17中，需要加入 show-password 才可以

------------分割线--------------------------------------------------------------------

若需手动实现密码显示与隐藏，可接着往下看（自动忽略我用的elementui，那时候我还不知道它自带呜呜）
实现效果：（画质略糊见谅）
在这里插入图片描述
要求：闭眼icon覆盖睁眼icon看起来和其本身一样
我用的 icon链接：http://www.fontawesome.com.cn/faicons/
完整代码：（有点长，但涉及密码显示隐藏的内容很短）

<template>
    <div class="login">
        <div class="loginTitle">
            管理员登录
        </div>
        <div class="rowEditor">
            <el-input v-model="userCode" placeholder="请输入工号"></el-input>
            <i class="fa fa-user-o fa-lg"></i>
        </div>
        <div class="rowEditor">
            <el-input v-model="userPwd" :type="psw?'password':'text'" placeholder="请输入密码"></el-input>
            <i class="fa fa-lock fa-lg"></i>
            <!-- 因为闭眼睁眼的icon重叠，闭眼icon在先，睁眼icon在后，才能触发到睁眼icon上的click事件 -->
            <i class="fa fa-eye-slash fa-lg" v-if="!psw" aria-hidden="true"></i>
            <i class="fa fa-eye fa-lg" aria-hidden="true" @click="psw=!psw"></i>
        </div>
        <div class="submit">
            <el-button  type="primary" @click="checkLogin">登录系统</el-button>
            <el-button type = "text">忘记密码</el-button>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      psw: true,
      userCode: '',
      userPwd: ''
    }
  }
}
</script>

<style lang="less" scoped>  // 核心：让闭眼睁眼的icon重叠，其他都不重要
    .login{
        background-color: #fff;
        box-shadow: 0 0 10px #999;
        width: 320px;
        padding: 20px;
        position: fixed;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
        border-radius: 16px;
        .loginImg{
            padding: 40px 0px;

            img{
                height: 100px;
                width: 100px;
                border-radius: 50%;
            }
        }
        .loginTitle{
            width: 120px;
            display: flex;
            justify-content: center;
            font-weight: bold;
            font-size: 1.5em;
            margin:0px 30% 15px;
            border-bottom: 3px solid #3A62D7;
        }

        .rowEditor{
            position: relative;
            margin-bottom: 10px;
            .fa-user-o,.fa-lock{
                position: absolute;
                left: 15px;
                top: 13px;
            }
            .fa-eye,.fa-eye-slash{  
                position: absolute;
                right: 15px;
                top: 13px;
            }
            ::v-deep .el-input__inner{
                padding-left: 36px;
                border-top-style: none;
                border-left-style: none;
                border-right-style: none;
                border-bottom: 2px solid #BBBBBB;
                border-radius: 0px;
            }
        }
        .submit{
            padding: 25px 0;
            display: flex;
            justify-content: space-around;
        }
    }
</style>