fix(组件): 组件增加prop

src/components/CountDown/src/CountdownInput.vue

@@ -1,54 +1,61 @@
-<template>
-  <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
-    <template #addonAfter>
-      <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
-    </template>
-    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
-      <slot :name="item" v-bind="data || {}"></slot>
-    </template>
-  </a-input>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue';
-  import CountButton from './CountButton.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-
-  const props = {
-    value: { type: String },
-    size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
-    count: { type: Number, default: 60 },
-    sendCodeApi: {
-      type: Function as PropType<() => Promise<boolean>>,
-      default: null,
-    },
-  };
-
-  export default defineComponent({
-    name: 'CountDownInput',
-    components: { CountButton },
-    inheritAttrs: false,
-    props,
-    setup(props) {
-      const { prefixCls } = useDesign('countdown-input');
-      const [state] = useRuleFormItem(props);
-
-      return { prefixCls, state };
-    },
-  });
-</script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-countdown-input';
-
-  .@{prefix-cls} {
-    .ant-input-group-addon {
-      padding-right: 0;
-      background-color: transparent;
-      border: none;
-
-      button {
-        font-size: 14px;
-      }
-    }
-  }
-</style>
+<template>
+  <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
+    <template #addonAfter>
+      <CountButton
+        :disabled="buttonDisabled"
+        :size="size"
+        :count="count"
+        :value="state"
+        :beforeStartFunc="sendCodeApi"
+      />
+    </template>
+    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+  </a-input>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import CountButton from './CountButton.vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+
+  const props = {
+    value: { type: String },
+    buttonDisabled: { type: Boolean, default: false },
+    size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
+    count: { type: Number, default: 60 },
+    sendCodeApi: {
+      type: Function as PropType<() => Promise<boolean>>,
+      default: null,
+    },
+  };
+
+  export default defineComponent({
+    name: 'CountDownInput',
+    components: { CountButton },
+    inheritAttrs: false,
+    props,
+    setup(props) {
+      const { prefixCls } = useDesign('countdown-input');
+      const [state] = useRuleFormItem(props);
+
+      return { prefixCls, state };
+    },
+  });
+</script>
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-countdown-input';
+
+  .@{prefix-cls} {
+    .ant-input-group-addon {
+      padding-right: 0;
+      background-color: transparent;
+      border: none;
+
+      button {
+        font-size: 14px;
+      }
+    }
+  }
+</style>

src/views/sys/login/RegisterForm.vue

@@ -20,9 +20,11 @@
           class="fix-auto-fill"
         />
       </FormItem> -->
+      <!-- :disabled="!reg.test(formData.userName)" -->
       <FormItem name="code" class="enter-x">
         <CountdownInput
           size="large"
+          :buttonDisabled="!reg.test(formData.userName)"
           autocomplete="off"
           class="fix-auto-fill"
           :count="60"