feat: 密码增加显示隐藏切换

src/components/loginAccount.vue

@@ -2,20 +2,36 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" ref="form" @submit.prevent>
       <el-form-item prop="account">
-        <el-input v-model="ruleForm.account" :placeholder="$t('loginPwd.account.placeholder')" @keyup.enter="handleSubmit">
+        <el-input
+          v-model="ruleForm.account"
+          :placeholder="$t('loginPwd.account.placeholder')"
+          @keyup.enter="handleSubmit">
           <template #prefix>
             <el-icon class="el-input__icon"><User /></el-icon>
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input type="password" v-model="ruleForm.password" :placeholder="$t('loginPwd.password.placeholder')" @keyup.enter="handleSubmit">
+        <el-input
+          :type="showPassword ? 'text' : 'password'"
+          v-model="ruleForm.password"
+          :placeholder="$t('loginPwd.password.placeholder')"
+          @keyup.enter="handleSubmit">
           <template #prefix>
             <el-icon class="el-input__icon"><Lock /></el-icon>
           </template>
+          <template #suffix>
+            <el-icon class="el-input__icon" @click="toggle" style="cursor: pointer">
+              <View v-if="showPassword" />
+              <Hide v-else />
+            </el-icon>
+          </template>
         </el-input>
       </el-form-item>
-      <router-link :to="{ path: '../password', query: $route.query }" class="forget-password-text" v-if="hasForgetPassword">
+      <router-link
+        :to="{ path: '../password', query: $route.query }"
+        class="forget-password-text"
+        v-if="hasForgetPassword">
         {{ $t('login.forgetPassword') }}
       </router-link>
       <!-- <el-checkbox v-if="hasRemember" v-model="ruleForm.RememberMe" style="margin-bottom: 10px">{{ $t('login.rememberMe') }}</el-checkbox> -->
@@ -31,11 +47,12 @@
 
 <script>
 import * as api from '@/api/account'
-import { User, Lock } from '@element-plus/icons-vue'
+import { User, Lock, View, Hide } from '@element-plus/icons-vue'
 
 export default {
   name: 'LoginAccount',
-  components: { User, Lock },
+  // eslint-disable-next-line vue/no-reserved-component-names
+  components: { User, Lock, View, Hide },
   props: {
     hasCodeLogin: { type: Boolean, default: true },
     hasForgetPassword: { type: Boolean, default: true },
@@ -49,7 +66,8 @@ export default {
         account: [{ required: true, message: this.$t('loginPwd.account.rule'), trigger: 'change' }],
         password: [{ required: true, message: this.$t('loginPwd.password.rule'), trigger: 'change' }]
       },
-      loading: false
+      loading: false,
+      showPassword: false
     }
   },
   computed: {
@@ -88,6 +106,9 @@ export default {
         this.$emit('success', response)
       }
       window.localStorage.clear()
+    },
+    toggle() {
+      this.showPassword = !this.showPassword
     }
   }
 }