验证码输入框 CodeInput

验证码输入框组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 count 属性设置可输入长度。
• 通过 focus 属性设置是否聚焦，默认为 true 。

<template>
    <pure-code-input count="4"></pure-code-input>
</template>

完成事件

• 通过 @onComplete 事件监听输入完成。

<template>
    <pure-code-input count="4" @complete="handleComplete"></pure-code-input>
</template>

<script setup>
    // 输入完成
    function handleComplete(code) {
        uni.showToast({
            title: `输入完成，验证码为：${code}`,
            icon: "none",
        });
    }
</script>

获取值

• 通过 getCode 方法获取用户已输入的验证码值。

<template>
    <pure-code-input count="4" ref="pureCodeInputRef"></pure-code-input>
    <pure-button @onClick="handleSubmit" text="提交"></pure-button>
</template>

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

    // refs
    const pureCodeInputRef = ref();

    // 提交
    function handleSubmit(code) {
        const code = pureCodeInputRef.value.getCode();
        if(code.lenght !== 4) {
            uni.showToast({
                title: "请输入完整的验证码",
                icon: "none",
            });
        }
    }
</script>

设置值

• 通过 setCode 方法设置验证码值。

<template>
    <pure-code-input count="4" ref="pureCodeInputRef"></pure-code-input>
</template>

<script setup>
    import { ref } from "vue";
    import { onReady } from "@dcloudio/uni-app";

    // refs
    const pureCodeInputRef = ref();

    // 从剪切板读取到验证码后设置到输入框中
   onReady(() => {
        setTimeout(() => {
            pureCodeInputRef.value.setCode("6688");
        }, 2500);
    });
</script>

Props

属性名	说明	类型	默认值	可选值	版本
count	验证码长度	[Number, String]	4	-	+1.0.0
focus	是否聚焦	Boolean	true	false	+1.0.0

Event

事件名	说明	回调参数	版本
@complete	输入完成事件	code: 用户输入的验证码	+1.0.0
@change	验证码值改变事件	code: 用户输入的验证码	+1.0.0

Expose

名称	说明	参数	版本
getCode	获取用户已输入的验证码值	-	+1.0.0
setCode	设置验证码值	code: 要设置的值	+1.0.0
setFocus	让输入框聚焦，此函数是为了兼容快手小程序，在快手小程序下通过 props 的 focus 属性设置聚焦会不生效，导致都不能输入，故在快手下需使用此函数让输入框聚焦	code: 要设置的值	+1.0.0