VerifyCode

Input for verification / OTP codes.

Basic Usage

<template>
  <bp-verify-code v-model="code"></bp-verify-code>
</template>

<script setup lang="ts">
import { ref } from "vue";
const code = ref<string>("");
</script>

Password Input

Mask digits with type set to password.

<template>
  <bp-verify-code type="password" v-model="code"></bp-verify-code>
</template>

<script setup lang="ts">
import { ref } from "vue";
const code = ref<string>("123456");
</script>

Status

Disable or lock input with disabled and readonly.

<template>
  <bp-space type="vertical">
    <bp-verify-code disabled v-model="code"></bp-verify-code>
    <bp-verify-code readonly v-model="code"></bp-verify-code>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const code = ref<string>("123456");
</script>

VerifyCode Props

v-model	Bound value	String	-	-
type	Input type	InputType	text	-
size	Input size	InputSize	default	-
length	Verification code length	Number	6	-
disabled	Whether disabled	Boolean	false	-
readonly	Whether readonly	Boolean	false	-

VerifyCode Events

finish

Triggered when input is complete

-

-

VerifyCode Methods

focus

Focus

-

-

-