CodeInput 验证码输入框

此组件一般用于验证用户短信验证码的场景，也可以结合fu-keyboard的键盘组件使用。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 mode 属性设置模式，可选值：

• box 盒子模式（默认）
• line 底部横线模式

<fu-code-input mode="line"></fu-code-input>

设置最大长度和初始值

• 通过 maxlength 属性设置可输入的方框个数，如6位验证码，此值设置为6即可；
• 通过 value/v-model 属性设置初始值；

<template>
    <fu-code-input v-model="code" maxlength="6"></fu-code-input>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const code = ref('258025');
</script>

设置是否自动获取焦点

如果需要一打开页面，就自动弹出键盘获取焦点，可设置 focus 属性值为 true，否则需要用户手动点击输入区域才能唤起键盘

<fu-code-input focus></fu-code-input>

<!-- 等价于 -->
<fu-code-input :focus="true"></fu-code-input>

设置用"●"替代输入内容

通过 dot 属性设置值为 true 时，会用"●"替代输入内容，事件回调中返回真实值

<fu-code-input dot></fu-code-input>

<!-- 等价于 -->
<fu-code-input :dot="true"></fu-code-input>

设置禁止唤起系统键盘

fusions-ui有键盘组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置 disabledKeyboard 属性设置为 true，来保证点击输入框时不会触发系统自带的键盘，否则会造成冲突

事件回调

• 每当输入内容发生变化，会回调一个 change 事件，内容为当前输入的字符串，如"256"
• 当输入的内容长度（字符个数）达到 maxlength 值后，就会触发 finish 事件，同时也会触发 change 事件

<template>
    <fu-code-input @change="handleInput" @finish="handleFinish"></fu-code-input>
</template>

<script setup>
    // methods方法
    // 定义 change 事件处理函数
    const handleInput = (e) => {
        console.log(`内容改变，当前值为：${e}`)
    };

    // 定义 finish 事件处理函数
    const handleFinish = (e) => {
        console.log(`输入完成，当前值为：${e}`)
    };
</script>

API

CodeInput Props

属性名	说明	类型	默认值	可选值
v-model	双向绑定预置值	String｜Number	-	-
maxlength	最大输入长度	String｜Number	4	-
dot	是否用圆点填充	Boolean	false	true
mode	输入框模式，详见上方基础用法	String	box	line
hairline	是否细边框	Boolean	false	true
space	字符间的距离	String	10	-
focus	是否自动获取焦点	Boolean	false	true
bold	字体和输入横线是否加粗	Boolean	false	true
color	字体颜色	String	#5c5e62	-
fontSize	字体大小	String	18	-
size	输入框大小，宽等于高	String	35	-
disabledKeyboard	禁止点击输入框唤起系统键盘	Boolean	false	true
borderColor	边框和线条颜色	String	#c9cacb	-
disabledDot	是否禁止输入"."符号	Boolean	true	false
radius	自定义圆角 仅mode为box有效	String	4	-

CodeInput Events

事件名	说明	回调参数
change	输入内容发生改变时触发，详见上方事件回调	() => void
finish	输入字符个数达 maxlength 值时触发，详见上方事件回调	() => void