gpc-ui 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gpc-ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "二小UI",
   "private": false,
   "main": "lib/gpc-ui.umd.min.js",

package/src/components/gpc-login/index.vue

@@ -4,7 +4,7 @@
       <div style="color: #018a46;  font-size: 40px; font-style: unset; text-align: right;">
         {{systemTitle}}
       </div>
-      <div style="color: #018a46;  font-size: 32px; font-style: unset; text-align: right;">●{{subtitle}}</div>
+      <div style="color: #018a46;  font-size: 32px; font-style: unset; text-align: right;">·{{subtitle}}</div>
     </div>
     <div class="wrap-box">
       <div class="box-content">
@@ -28,15 +28,15 @@
                   <input type="text" placeholder="用户名/手机号" v-model="accountFrom.username">
                 </div>
                 <div class="input-box">
-                  <input type="password" placeholder="密码" v-model="accountFrom.password">
-                  <i class="el-icon-edit"></i>
+                  <input :type="inputType" placeholder="密码" v-model="accountFrom.password">
+                  <i class="el-icon-view" :class="{ icon: Color }" @click="Show" ></i>
                 </div>
                 <drag-verify ref="dragVerifyLogin" :width="300" :isPassing.sync="isPassingAccount" text="请按住滑块拖动" successText="验证通过" progressBarBg="#11C36A"
                              handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
                              @passcallback="passCallAccountBack">
                 </drag-verify>
                 <div class="buttons clearfix">
-                  <button type="button" class="btn-login fr button" @click="getAccountLogin">登录</button>
+                  <el-button class="btn-login fr button" :loading="loading" @click="getAccountLogin">登录</el-button>
                   <el-button type="text" style="color: #028037;" size="small" @click="getRegister">重置密码</el-button>
                 </div>
               </div>
@@ -144,10 +144,16 @@ export default {
       type: String,
       default: ''
     },
+    loading: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
       isLogin: true,
+      inputType: "password",
+      Color: false,
       // 当前选中的标签
       curTab: "1",
 
@@ -297,7 +303,12 @@ export default {
         console.warn(`Element  with selector ${selector} not found.`);
       }
     },
-
+    // 密码的可见和不可见
+    Show() {
+      // 点击改变input框的展示方式
+      this.inputType = this.inputType === "password" ? "text" : "password";
+      this.Color = !this.Color;
+    },
   },
   mounted() {
     // 确保在组件挂载后执行 DOM 操作
@@ -585,7 +596,7 @@ a {
   background-color: #00b85c;
   transition: all .36s;
   right: 20px;
-  color: #ccc;
+  //color: #ccc;
 }
 
 .input-box input {
@@ -679,4 +690,8 @@ a {
   flex-direction: row;
   justify-content: space-evenly;
 }
+
+.icon {
+  color: #028037;
+}
 </style>