更新记录

1.0.0（2024-07-10） 下载此版本

新增

平台兼容性

uni-app

hbxw-code-input组件

介绍

一个高度可定制的验证码输入组件

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中

<template>
    <view class="">
        <text class="title">基础使用</text>
        <hbxw-code-input @input="input" />
        <hbxw-code-input styleType="line" />
        <text class="title">双向绑定</text>
        {{codeVal}}
        <hbxw-code-input v-model:value="codeVal" />
        <button size="mini" @click="codeValChange">codeVal change</button>

        <text class="title">父级定宽自动填充</text>
        <view style="width: 480rpx">
            <hbxw-code-input :len="5" />
            <hbxw-code-input :len="5" styleType="line" />
        </view>

        <text class="title">高度自定义</text>
        <hbxw-code-input 
            width="80rpx" 
            cursorColor="red" 
            borderColor="red" 
            bgColor="yellow"
            inputType="text"
            :len="5"
            :itemStyle="{borderRadius: '10rpx','boxShadow': '0 0 5rpx rgba(0,0,0,0.3)'}"
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                codeVal: '123'
            }
        },
        watch: {
            codeVal(newVal, oldVal) {
                console.log('---- watch value ----:', newVal);
            }
        },
        methods: {
            input(e) {
                console.log('---- input ----:', e);
            },
            codeValChange() {
                this.codeVal = '456';
            }
        }
    }
</script>

<style scoped>
.title{
    display: flex;
    padding: 20rpx 10rpx;
    font-size: 32rpx;
}
</style>

API

Props

Events

注意事项

无法单独对某一位验证码执行修改，想改得先删除到指定位置再修改 点击验证框会让最后一位聚焦，而不是当前点击的项