浏览代码

feat:add showPwd

Pan 7 年之前
父节点
当前提交
29ec7f8a18
共有 2 个文件被更改,包括 12 次插入2 次删除
  1. 二进制
      favicon.ico
  2. 12 2
      src/views/login/index.vue

二进制
favicon.ico


+ 12 - 2
src/views/login/index.vue

13
         <span class="svg-container">
13
         <span class="svg-container">
14
           <svg-icon icon-class="password"></svg-icon>
14
           <svg-icon icon-class="password"></svg-icon>
15
         </span>
15
         </span>
16
-        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
16
+        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
17
           placeholder="password"></el-input>
17
           placeholder="password"></el-input>
18
+          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
18
       </el-form-item>
19
       </el-form-item>
19
       <el-form-item>
20
       <el-form-item>
20
         <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
21
         <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
58
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
59
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
59
         password: [{ required: true, trigger: 'blur', validator: validatePass }]
60
         password: [{ required: true, trigger: 'blur', validator: validatePass }]
60
       },
61
       },
61
-      loading: false
62
+      loading: false,
63
+      pwdType: 'password'
62
     }
64
     }
63
   },
65
   },
64
   methods: {
66
   methods: {
67
+    showPwd() {
68
+      if (this.pwdType === 'password') {
69
+        this.pwdType = ''
70
+      } else {
71
+        this.pwdType = 'password'
72
+      }
73
+    },
65
     handleLogin() {
74
     handleLogin() {
66
       this.$refs.loginForm.validate(valid => {
75
       this.$refs.loginForm.validate(valid => {
67
         if (valid) {
76
         if (valid) {
154
       font-size: 16px;
163
       font-size: 16px;
155
       color: $dark_gray;
164
       color: $dark_gray;
156
       cursor: pointer;
165
       cursor: pointer;
166
+      user-select:none;
157
     }
167
     }
158
     .thirdparty-button{
168
     .thirdparty-button{
159
       position: absolute;
169
       position: absolute;