feat: pinInput supports disabled props

vbenjs · Nov 10, 2024 · 8048045 · 8048045
1 parent 57d5a91
commit 8048045
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -10,12 +10,14 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<PinInputProps>(), {
-  btnLoading: false,
-  codeLength: 6,
-  handleSendCode: async () => {},
-  maxTime: 60,
-});
+const {
+  codeLength = 6,
+  createText = async () => {},
+  disabled = false,
+  handleSendCode = async () => {},
+  loading = false,
+  maxTime = 60,
+} = defineProps<PinInputProps>();
 
 const emit = defineEmits<{
   complete: [];
@@ -30,11 +32,11 @@ const countdown = ref(0);
 
 const btnText = computed(() => {
   const countdownValue = countdown.value;
-  return props.createText?.(countdownValue);
+  return createText?.(countdownValue);
 });
 
 const btnLoading = computed(() => {
-  return props.loading || countdown.value > 0;
+  return loading || countdown.value > 0;
 });
 
 watch(
@@ -51,8 +53,8 @@ function handleComplete(e: string[]) {
 
 async function handleSend(e: Event) {
   e?.preventDefault();
-  await props.handleSendCode();
-  countdown.value = props.maxTime;
+  await handleSendCode();
+  countdown.value = maxTime;
   startCountdown();
 }
 
@@ -77,6 +79,7 @@ const id = useId();
   <PinInput
     :id="id"
     v-model="inputValue"
+    :disabled="disabled"
     class="flex w-full justify-between"
     otp
     placeholder="○"
@@ -92,6 +95,7 @@ const id = useId();
         />
       </PinInputGroup>
       <VbenButton
+        :disabled="disabled"
         :loading="btnLoading"
         class="flex-grow"
         size="lg"

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
@@ -8,6 +8,10 @@ interface PinInputProps {
    * 发送验证码按钮文本
    */
   createText?: (countdown: number) => string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
   /**
    * 自定义验证码发送逻辑
    * @returns