From 71f856029c21e42552e7055d7cb80fba9df4d956 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Fri, 1 Nov 2024 11:23:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=A6=81=E6=AD=A2=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue | 73 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4533ab9c..5aea53cc 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -83,7 +83,7 @@
               <svg-icon icon-class="password" />
             </span>
             <!-- password -->
-            <el-input
+            <!-- <el-input
               :key="passwordType"
               ref="password"
               v-model="loginForm.password"
@@ -100,6 +100,21 @@
               <svg-icon
                 :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
               />
+            </span> -->
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model="pwdCover"
+              size="small"
+              type="text"
+              :placeholder="$t('login:form:password')"
+              name="password"
+              @input="setPassword"
+              tabindex="2"
+              @keyup.enter.native="handleLogin"
+            />
+            <span class="show-pwd" @click="hidePassword">
+              <svg-icon :icon-class="!isShowPassword ? 'eye' : 'eye-open'" />
             </span>
           </el-form-item>
           <!-- Login -->
@@ -276,6 +291,8 @@ export default {
       },
       loading: false,
       passwordType: 'password',
+      pwdCover: null,
+      isShowPassword: false,
       loginType: null,
       location: null,
       isShow: false,
@@ -437,6 +454,60 @@ export default {
     handleResetPwd() {
       this.$router.push({ name: 'Resetpassword' })
     },
+    // 输入框输入事件
+    setPassword(val) {
+      if (this.isShowPassword) {
+        this.loginForm.password = val
+      } else {
+        let reg = /[0-9a-zA-Z]/g // 只允许输入字母和数字
+        let nDot = /[^●]/g // 非圆点字符
+        let index = -1 // 新输入的字符位置
+        let lastChar = void 0 // 新输入的字符
+        let realArr = this.loginForm.password.split('') // 真实密码数组
+        let coverArr = val.split('') // 文本框显示密码数组
+        let coverLen = val.length // 文本框字符串长度
+        let realLen = this.loginForm.password.length // 真实密码长度
+        // 找到新输入的字符及位置
+        coverArr.forEach((el, idx) => {
+          if (nDot.test(el)) {
+            index = idx
+            lastChar = el
+          }
+        })
+        // 判断输入的字符是否符合规范，不符合的话去掉该字符
+        if (lastChar && !reg.test(lastChar)) {
+          coverArr.splice(index, 1)
+          this.pwdCover = coverArr.join('')
+          return
+        }
+        if (realLen < coverLen) {
+          // 新增字符
+          realArr.splice(index, 0, lastChar)
+        } else if (coverLen <= realLen && index !== -1) {
+          // 替换字符（选取一个或多个字符直接替换）
+          realArr.splice(index, realLen - (coverLen - 1), lastChar)
+        } else {
+          // 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
+          let pos = document.getElementById('pwd').selectionEnd // 获取光标位置
+          realArr.splice(pos, realLen - coverLen)
+        }
+        // 将 pwdCover 替换成 ●
+        this.pwdCover = val.replace(/\S/g, '●')
+        this.loginForm.password = realArr.join('')
+      }
+    },
+    // 点击右侧小眼睛控制显示隐藏
+    hidePassword() {
+      if (!this.isShowPassword) {
+        // console.log("显示");
+        this.isShowPassword = true
+        this.pwdCover = this.loginForm.password
+      } else {
+        // console.log("隐藏");
+        this.isShowPassword = false
+        this.pwdCover = this.pwdCover.replace(/\S/g, '●')
+      }
+    },
   },
 }
 </script>