input输入密码类型，点击小眼睛显示密码或隐藏功能

最新推荐文章于 2024-08-14 09:49:15 发布

原创最新推荐文章于 2024-08-14 09:49:15 发布 · 1.2w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在前端实现密码输入框可见性切换的方法，通过点击眼睛图标，可以在显示和隐藏密码间切换，适用于登录界面等场景。使用Vue.js实现，但原理同样适用于其他JavaScript框架。

一般的登录输入密码类型的，都会用一张图片点击查看密码，我遇到了这样的功能，所以就记下来了。
在这里插入图片描述

 <div class="pwd label">
          <div class="icons">
            <img src="../../../static/images/mima.png" alt />
          </div>
          <div class="inputbox">
            <input :type="pwdType" placeholder="请输入密码" v-model.trim="pwd_value" />
          </div>
          <div class="eyesicons">
            <img :src="seen?openeye:nopeneye" alt @click="changeType()" />
          </div>
  </div>

思路其实很简单
1.放一张眼睛小图片在input旁边，样式觉得怎么好看就怎么写（我放了两张不同icon）
2.给图片注册一个点击事件，点击图片，改变input的type,把password改为text，就可以查看密码了。再次点击相反就ok了。
我是用vue写的，用js思路都是一样

data(){
	openeye: require("../../../static/images/yanjing (1).png"), //小眼睛图片地址
    nopeneye: require("../../../static/images/yanjing.png"),
    pwdType: "password", //密码类型
},
methods:{
 // 点击眼睛icon查看密码
    changeType() {
      this.pwdType = this.pwdType === "password" ? "text" : "password";
      this.seen = !this.seen; //小眼睛的变化,切换图片
    },
}