fix: 输入框符合要求按钮高亮

Author: lichunn

packages/design-core/src/login/ForgotPassword.vue

@@ -52,7 +52,7 @@
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="handleForgot"> 提交</tiny-button>
+        <tiny-button :class="{ successBg: isReady }" type="primary" @click="handleForgot"> 提交</tiny-button>
       </tiny-form-item>
     </tiny-form>
     <div class="forgot-bottom">
@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, watch } from 'vue'
+import { reactive, watch, computed } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyTooltip } from '@opentiny/vue'
 import useLogin from './js/useLogin'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
@@ -90,6 +90,17 @@ export default {
       rules: [...useLogin().passwordRules]
     })
 
+    const isReady = computed(() => {
+      return (
+        state.forgotData.username &&
+        state.forgotData.password &&
+        state.forgotData.key &&
+        state.forgotData.confirmPassword &&
+        !state.pwManualShow &&
+        state.forgotData.confirmPassword === state.forgotData.password
+      )
+    })
+
     const handleConfirmPwChange = () => {
       if (state.forgotData.confirmPassword !== state.forgotData.password) {
         state.confirmManualShow = true
@@ -146,6 +157,7 @@ export default {
     )
     return {
       state,
+      isReady,
       handleForgot,
       toLogin
     }
@@ -188,6 +200,10 @@ export default {
   }
 }
 
+.successBg {
+  background: #191919 !important;
+}
+
 :deep(.tiny-form-item__content) {
   margin-left: 0 !important;
 }

packages/design-core/src/login/Index.vue

@@ -76,7 +76,8 @@ export default {
   }
 
   .login-right {
-    flex: 1;
+    flex: 1.2;
+    margin-top: 50px;
     margin-left: 80px;
     .login-form {
       box-sizing: border-box;
@@ -102,6 +103,9 @@ export default {
     margin-top: 20px;
     font-size: 14px;
   }
+  :deep(.tiny-button.tiny-button.tiny-button.tiny-button.tiny-button--primary) {
+    border: none;
+  }
   :deep(.tiny-input.tiny-input .tiny-input__inner.tiny-input__inner) {
     height: 32px;
     font-size: 14px;

packages/design-core/src/login/Login.vue

@@ -14,7 +14,7 @@
         ></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="handleLogin"> 登录 </tiny-button>
+        <tiny-button :class="{ successBg: isReady }" type="primary" @click="handleLogin"> 登录 </tiny-button>
       </tiny-form-item>
     </tiny-form>
     <div class="login-bottom">
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue'
+import { reactive, computed } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import useLogin from './js/useLogin'
@@ -51,6 +51,10 @@ export default {
       }
     })
 
+    const isReady = computed(() => {
+      return state.loginData.username && state.loginData.password
+    })
+
     const handleLogin = () => {
       getMetaApi(META_SERVICE.Http)
         .post('/platform-center/api/user/login', {
@@ -78,8 +82,10 @@ export default {
     const toForgot = () => {
       emit('changeStatus', useLogin().FORGOT)
     }
+
     return {
       state,
+      isReady,
       handleLogin,
       toRegister,
       toForgot
@@ -111,6 +117,9 @@ export default {
   padding-left: 40%;
   margin-bottom: 24px;
 }
+.successBg {
+  background: #191919 !important;
+}
 
 .login-other::before,
 .login-other::after {

packages/design-core/src/login/Register.vue

@@ -49,7 +49,7 @@
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="primary" @click="handleRegister"> 注册</tiny-button>
+        <tiny-button :class="{ successBg: isReady }" type="primary" @click="handleRegister"> 注册</tiny-button>
       </tiny-form-item>
     </tiny-form>
     <div class="register-bottom">
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, watch } from 'vue'
+import { reactive, watch, computed } from 'vue'
 import { TinyForm, TinyFormItem, TinyInput, TinyButton, TinyTooltip } from '@opentiny/vue'
 import useLogin from './js/useLogin'
 import { getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
@@ -86,6 +86,16 @@ export default {
       rules: [...useLogin().passwordRules]
     })
 
+    const isReady = computed(() => {
+      return (
+        state.registerData.username &&
+        state.registerData.password &&
+        state.registerData.confirmPassword &&
+        !state.pwManualShow &&
+        state.registerData.confirmPassword === state.registerData.password
+      )
+    })
+
     const handleConfirmPwChange = () => {
       if (state.registerData.confirmPassword !== state.registerData.password) {
         state.confirmManualShow = true
@@ -144,6 +154,7 @@ export default {
 
     return {
       state,
+      isReady,
       handleRegister,
       handlePwChange,
       toLogin
@@ -188,6 +199,10 @@ export default {
   }
 }
 
+.successBg {
+  background: #191919 !important;
+}
+
 :deep(.tiny-form-item__content) {
   margin-left: 0 !important;
 }