Browse Source

添加密码展示与隐藏

11wqe1 2 weeks ago
parent
commit
a46fccb2fa
3 changed files with 27 additions and 4 deletions
  1. BIN
      src/assets/login/ico_eyes.png
  2. BIN
      src/assets/login/ico_show_pwd.png
  3. 27 4
      src/views/login/loginPage.vue

BIN
src/assets/login/ico_eyes.png


BIN
src/assets/login/ico_show_pwd.png


+ 27 - 4
src/views/login/loginPage.vue

@@ -158,13 +158,32 @@
 
 								<div class="fa_i_item">
 									<span>{{ lang.password }}</span>
-									<div>
-										<input
+									<div class="psdg">
+										<el-input
+											:type="showPassword ? 'text' : 'password'"
+											:placeholder="lang.enterpassword"
+											v-model="password"
+											suffix-icon
+											@keyup.enter.native="loginFn">
+												<i slot="suffix" @click="showPassword = !showPassword">
+													<img
+														v-if="showPassword"
+														class="input_icon"
+														src="@/assets/login/ico_eyes.png"
+														/>
+													<img
+														v-else
+														class="input_icon"
+														src="@/assets/login/ico_show_pwd.png"
+													/>
+												</i>
+										</el-input>
+										<!-- <input
 											type="password"
 											:placeholder="lang.enterpassword"
 											v-model="password"
 											@keyup.enter="loginFn"
-										/>
+										/> -->
 									</div>
 								</div>
 							</div>
@@ -454,6 +473,7 @@ export default {
 	name: "loginPage",
 	data() {
 		return {
+			showPassword:false,
 			// 0选择页 1教师 2学生
 			logIdentity:0,
 			nextStepsLoading:false,
@@ -1770,7 +1790,10 @@ export default {
 	height: 70px;
 	margin-bottom: 30px;
 }
-
+.psdg >>> .el-input__suffix{
+	display: flex;
+	align-items: center;
+}
 .fa_i_item > span {
 	font-size: 16px;
 	color: rgba(0, 0, 0, 0.9);