uniapp~v3 移动端验证码分割的实现

直接打开链接查看效果图（https://mp-91187d2c-1225-4c77-b616-a32b09715ff4.cdn.bspapp.com/cloudstorage/微信图片_20230810154501.png）

• 具体功能
  1、输入的时候自动分割
  2、粘贴内容直接分割
  3、不能点击某一个进行删除，只能从后面进行删除

• 具体代码实现
  1、页面template(使用input框定位覆盖在上面，光标是自己写的，当然你也可以用input中letter-spacing实现，有人博客中用这个css属性已实现，uniapp中使用ref获取元素，然后调用blur提示没有这个方法，所以只能放弃)

• 注意

input中的maxlength不能一开始写死，否则当你复制的数据大于6之后，input是展示，但是页面效果不会展示，所以做了一个动态的控制，我写的有个小bug，当你输入完最后一个数据，点击最后数据删除的时候，不会显示光标，删除一个数据之后才会展示，原因是下面class的判断有问题，你也可以试着修改下

<view class="flexr flexcc f40 c25 m-t-72 box" @click="showBtn">
            <template v-for="(item,index) in 6" :key="index">
                <view class="box-v">{{code[index]}}
                <view :class="(code.length) == index&&show==1?'ac':''"> 
                </view>
                </view>
            </template>
            <input type="number" ref="inp" :maxlength="m"  class="inp f40 c25" v-model="code"  @input="inputFun" >
</view>

• js 代码

const data = reactive({
    code:'',//当前的验证码
    show:0,//当用户点击之后在展示光标
    m:-1//maxlength，-1可以无限输入
})
const inputFun = e=>{
    if(data.code.length>6){
        data.code = data.code.slice(0,6)    
        data.m=6
    }else if(data.code.length==0){
        data.m = -1
    }
}

• css代码

      .box{
            position: relative;
            // padding:0 20upx;
            .box-v{
                width: 74upx;
                height: 60upx;
                line-height: 60upx;
                box-sizing: border-box;
                text-align: center;
                padding: 4upx 0;
                border-bottom: 1upx solid #B6BDD0;
                position: relative;
                margin-right: 40upx;
            }
            .box-v:last-child{
                margin-right: 0;
            }
            .ac{
                position: absolute;
                width: 2upx;
                height: 60upx;
                background-color: #000;
                top: 0;
                left: 20%;
                transform: translate(-20%);
                animation: shan 1s linear infinite;
            }
            @keyframes shan {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
            .inp{
                position: absolute;
                height: 60upx;
                width: 100%;
                // letter-spacing: 84upx;
                // padding-left: 30upx;
                // border: 1upx solid #000;
                opacity: 0;
            }
        }

• 光标展示位置，分割位数都可根据业务需求进行调试
• 如果对你有帮助，动动你的小手，点个赞吧！