验证码 VerifyCode

用于固定长度的验证码或者支付密码输入，提升用户输入体验。

基础用法

验证码输入框的基础用法。

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

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

密文输入

通过设置 type 属性为 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>

不同状态

和输入框一样，支持 disabled 和 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 属性

v-model	绑定值	String	-	-
name	输入框名称	String	-	-
type	输入框类型	InputType	text	-
placeholder	占位文本	String	-	-
size	输入框尺寸	InputSize	default	-
length	验证码长度	Number	6	-
disabled	是否禁用	Boolean	false	-
readonly	是否只读	Boolean	false	-

VerifyCode 事件

finish	输入完成触发	-	-