我做的這個測試系統所屬的功能模塊用的是默認自帶的，沒有密碼明文、密文顯示功能，也就是我們在登錄時經常使用的，默認顯示輸入的密文，點擊“睜眼”圖片顯示明文，點擊“閉眼”圖片顯示密文。
以下三段代碼放到login.html頁面中即可：包括CSS樣式代碼、JS實現代碼、password調用代碼，其中css和js代碼可以分開放到不同的文件中也是可以的。
1、CSS樣式代碼，放到<head></head>中：
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>測試管理系統</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/AdminLTE.min.css"> <style type="text/css"> #img { width: 25px; height: 25px; position: absolute; right: 10px; margin-top: 12px; top: 5px; text-align: center; } </style> </head>
2、JS實現代碼，放到<body></body>中任何位置（我是放到了login.html頁面的最下頭）：
<body> 。。。。 。。。。 <script type="text/javascript"> //添加登錄密碼明文、密文切換功能20210216 var demoImg = document.getElementById("img"); var PWD = document.getElementById("HXB-login-password"); function hideShowPsw() { if (PWD.type == "password") { PWD.type = "text"; demoImg.src = "/swagger/images/icon-invisible.png"; //閉眼圖片 } else { PWD.type = "password"; demoImg.src = "/swagger/images/icon-visible.png"; // 睜眼圖片 } } </script>
</body>
3、登錄代碼中password調用代碼
代碼中 id="HXB-login-password" 和 onclick="hideShowPsw()" 就是調用的js的方法，名稱可以自定義修改。
<div class="login-box-body"> <div v-if="error" class="alert alert-danger alert-dismissible"> <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-circle"></i> {{errorMsg}}</h4> </div> <div class="form-group has-feedback"> 登錄賬號代碼 </div> <div class="form-group has-feedback"> <input id="HXB-login-password" type="password" class="form-control-login" v-model="form.password" placeholder="密碼" > <img id="img" onclick="hideShowPsw()" src="/swagger/images/icon-visible.png"> </div> <div class="form-group has-feedback"> 驗證碼代碼 </div> <div class="form-group has-feedback"> 刷新驗證碼代碼 </div> <div class="row"> <!-- /.col --> <div class="col-xs-4"> <button type="button" class="btn btn-primary-login btn-block btn-flat" @click="login">登錄</button> </div> <!-- /.col --> </div>
用到的睜眼圖片、閉眼圖片，自己下載：
睜眼圖片：https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9D%81%E7%9C%BC
閉眼圖片：https://www.iconfont.cn/search/index?searchType=icon&q=%E9%97%AD%E7%9C%BC
圖片下載后放到網站images目錄中。
我用的eclipse，還需要點擊項目名稱F5刷新以下才可以。