验证码 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>

不同状态 ​

支持 disabled、readonly、is-danger 三个状态

<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-verify-code is-danger v-model="code"></bp-verify-code>
  </bp-space>
</template>

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

匿文模式 ​

同个设置 is-password 使用匿文模式

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

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

VerifyCode 属性 ​

v-model
输入框绑定值
String
-
size
输入框尺寸
Enum
normal
length
验证码长度
Number
6
disabled
是否禁用
Boolean
false
readonly
是否只读状态
Boolean
false
is-danger
是否警示状态
Boolean
false
is-password
是否匿文模式
Boolean
false

VerifyCode 事件 ​

finish
输入完成触发
none