登录界面的密码框的小眼睛以及切换功能

src/modules/portal/views/Login.vue

@@ -37,10 +37,24 @@
           <input
             id="password"
             v-model="loginInfo.password"
-            type="password"
+            :type="seePassword ? 'text' : 'password'"
             placeholder="请输入密码"
             @keyup.enter="login"
           />
+          <v-icon
+            v-if="seePassword"
+            name="eye-slash"
+            scale="1.2"
+            class="eye-icon"
+            @click="seePassword = !seePassword"
+          ></v-icon>
+          <v-icon
+            v-else
+            name="eye"
+            scale="1.2"
+            class="eye-icon"
+            @click="seePassword = !seePassword"
+          ></v-icon>
         </div>
         <div class="smscode">
           <v-icon
@@ -88,6 +102,7 @@ export default {
         password: "",
         smsCode: null,
       },
+      seePassword: false,
     };
   },
   watch: {
@@ -191,7 +206,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .bg {
   width: 100vw;
   height: 100vh;
@@ -265,6 +280,12 @@ export default {
   align-items: center;
   justify-items: center;
   margin-top: 10px;
+  position: relative;
+  .eye-icon {
+    position: absolute;
+    right: 10px;
+    cursor: pointer;
+  }
 }
 .right_login .smscode {
   height: 38px;

src/plugins/vueAwesome.js

@@ -9,5 +9,7 @@ import "vue-awesome/icons/sign-out-alt";
 import "vue-awesome/icons/lock";
 import "vue-awesome/icons/bars";
 import "vue-awesome/icons/user-check";
+import "vue-awesome/icons/eye";
+import "vue-awesome/icons/eye-slash";
 
 Vue.component("VIcon", Icon);