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

 <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; //小眼睛的变化,切换图片
    },
}