From 6dfe35d6b78f18c23c0fc9eaa7599170e27a0b20 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Sun, 4 Dec 2022 03:57:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E7=94=A8=20element=20plus=20=E5=8E=9F?=
 =?UTF-8?q?=E7=94=9F=20api=20=E5=AE=9E=E7=8E=B0=E5=AF=86=E7=A0=81=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=98=BE=E7=A4=BA=E5=AF=86=E7=A0=81=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue                  | 46 +++++-----------------------
 src/views/personal/edit.password.vue |  6 ++--
 2 files changed, 10 insertions(+), 42 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index c006e994..e308f679 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -21,12 +21,10 @@ const title = import.meta.env.VITE_APP_TITLE
 // 表单类型，login 登录，reset 重置密码
 const formType = ref('login')
 const loading = ref(false)
-const passwordType = ref('password')
 const redirect = ref(route.query.redirect?.toString() ?? '/')
 
 // 登录
 const loginFormRef = ref<FormInstance>()
-const loginPasswordRef = ref<HTMLElement>()
 const loginForm = ref({
   account: localStorage.login_account || '',
   password: '',
@@ -63,8 +61,6 @@ function handleLogin() {
 
 // 注册
 const registerFormRef = ref<FormInstance>()
-const registerPasswordRef = ref<HTMLElement>()
-const registerCheckPasswordRef = ref<HTMLElement>()
 const registerForm = ref({
   account: '',
   captcha: '',
@@ -110,7 +106,6 @@ function handleRegister() {
 
 // 重置密码
 const resetFormRef = ref<FormInstance>()
-const resetNewPasswordRef = ref<HTMLElement>()
 const resetForm = ref({
   account: localStorage.login_account || '',
   captcha: '',
@@ -140,13 +135,6 @@ function handleReset() {
   })
 }
 
-function showPassword(passwordEl: HTMLElement | undefined) {
-  passwordType.value = passwordType.value === 'password' ? '' : 'password'
-  nextTick(() => {
-    passwordEl?.focus()
-  })
-}
-
 function testAccount(account: string) {
   loginForm.value.account = account
   loginForm.value.password = '123456'
@@ -170,7 +158,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
+            <el-input v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -179,17 +167,12 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
+            <el-input v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="on" show-password @keyup.enter="handleLogin">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword(loginPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>
@@ -228,7 +211,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+            <el-input v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -249,31 +232,21 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <el-input ref="registerPasswordRef" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
+            <el-input v-model="registerForm.password" type="password" placeholder="密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="checkPassword">
-            <el-input ref="registerCheckPasswordRef" v-model="registerForm.checkPassword" :type="passwordType" placeholder="确认密码" tabindex="4" autocomplete="on">
+            <el-input v-model="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerCheckPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>
@@ -295,7 +268,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+            <el-input v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -316,17 +289,12 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="newPassword">
-            <el-input ref="resetNewPasswordRef" v-model="resetForm.newPassword" :type="passwordType" placeholder="新密码" tabindex="3" autocomplete="on">
+            <el-input v-model="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(resetNewPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>
diff --git a/src/views/personal/edit.password.vue b/src/views/personal/edit.password.vue
index 7246b42c..2b6e9973 100644
--- a/src/views/personal/edit.password.vue
+++ b/src/views/personal/edit.password.vue
@@ -74,13 +74,13 @@ function onSubmit() {
         <el-col :md="24" :lg="12">
           <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
             <el-form-item label="原密码" prop="password">
-              <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.password" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
             <el-form-item label="新密码" prop="newpassword">
-              <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
             <el-form-item label="确认新密码" prop="checkpassword">
-              <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
           </el-form>
         </el-col>