查看密码

src/views/login.vue

@@ -28,7 +28,7 @@
         <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
-            type="password"
+            :type="type"
             auto-complete="off"
             placeholder="密码"
             @keyup.enter.native="handleLogin"
@@ -36,6 +36,14 @@
             <div slot="prefix" class="iconO">
               <div class="iconUser1"></div>
             </div>
+            <div class="look-icon" slot="suffix">
+              <i
+                class="icon-style"
+                :class="elIcon"
+                autocomplete="auto"
+                @click="flag = !flag"
+              />
+            </div>
           </el-input>
         </el-form-item>
         <el-form-item prop="code" v-if="captchaEnabled">
@@ -93,8 +101,17 @@ import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
+  computed: {
+    type() {
+      return this.flag ? "text" : "password";
+    },
+    elIcon() {
+      return this.flag ? "el-icon-minus" : "el-icon-view";
+    },
+  },
   data() {
     return {
+      flag: false,
       codeUrl: "",
       loginForm: {
         username: "",
@@ -192,6 +209,14 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+.look-icon {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.icon-style {
+  font-size: 16px;
+}
 .loginfooterbox .el-button {
   background: #115ba4 !important;
   border-color: #115ba4 !important;