InputCode Verification Code Input

💡 Component: my-input-code

Verification code input component, used for obtaining email and SMS verification codes.

Local import

import { defineAsyncComponent } from 'vue'

const MyInputCode = defineAsyncComponent(() => import('/@/components/my-input-code/index.vue'))

Email Verification Code

const state = reactive({
  form: {
    email: '',
    code: '',
    codeId: '',
  },
})

// Validate email
const validateEmail = (callback: Function) => {
  formRef.value.validateField('email', (isValid: boolean) => {
    if (!isValid) {
      emailRef.value?.focus()
      return
    }
    callback?.()
  })
}

// Send verification code
const onSend = (codeId: string) => {
  state.form.codeId = codeId
}

<MyInputCode v-model="form.code" :email="form.email" :validate="validateEmail" @send="onSend" />

SMS Verification Code

const state = reactive({
  form: {
    mobile: '',
    code: '',
    codeId: '',
  },
})

// Validate mobile number
const validateMobile = (callback: Function) => {
  formRef.value.validateField('mobile', (isValid: boolean) => {
    if (!isValid) {
      phoneRef.value?.focus()
      return
    }
    callback?.()
  })
}

// Send verification code
const onSend = (codeId: string) => {
  state.form.codeId = codeId
}

 <MyInputCode v-model="form.code" :mobile="form.mobile" :validate="validateMobile" @send="onSend" />

Props

Prop	Description	Type	Default	Accepted Values
maxlength	Maximum length	Number	6	-
seconds	Countdown after getting the code, in seconds	Number	60	-
maxlength	Maximum length	Number	6	-
startText	Countdown start text	String	Get Code	-
changeText	Countdown in-progress text	String	s sec resend	-
endText	Countdown end text	String	Resend Code	-
mobile	Mobile number	String	-	-
email	Email address	String	-	-
validate	Validation method	Function	-	-