更新记录

1.0（2020-09-04） 下载此版本

自定义位数验证码。 如需查看自定义键盘请跳转：https://ext.dcloud.net.cn/plugin?id=2694 如需查看密码支付键盘请跳转：https://ext.dcloud.net.cn/plugin?id=2591

平台兼容性

作者说

有项目需要开发的请联系 QQ:371524845 微信：jp99ww

本团队人员配备齐全，定会让君满意而归

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

使用方法

基础用法

本验证框支持调用系统键盘输入及自定义键盘输入，自定义键盘请参考（数字键盘：jpKeyboard）

<template>
    <view class="content">
        <view>调用系统键盘</view>
        <jpCoded style="height: 80rpx;margin-left: 125rpx;" :width="500" :codes="codes" @tokey="toOpen" @inputVal="inputVal"></jpCoded>
        <view style="margin-top: 50rpx;">调用jpKeyboard键盘</view>
        <jpCoded style="height: 80rpx;margin-left: 125rpx;" :width="500" :keyType="false" :codes="codes2" @tokey="toOpen" @inputVal="inputVal"></jpCoded>
        <jpKeyboard ref="jpKeyboard"  @inputPwd="inputPwd" @backspace="backspace"></jpKeyboard>
    </view>
</template>

<script>
    import jpKeyboard from '@/components/jp-keyboard/jp-keyboard.vue';
    import jpCoded from '@/components/jp-coded/jp-coded.vue';
    export default {
        components: {
            jpKeyboard,
            jpCoded,
        },
        data() {
            return {
                codes: '',
                codes2: ''
            }
        },
        methods: {
            toOpen() {
                this.$refs.jpKeyboard.toOpen()
            },
            inputPwd(e) {
                if(this.codes2.length<6){
                    this.codes2 += e
                }
            },
            backspace() {
                this.codes2 = this.codes2.substring(0, this.codes2.length - 1)
            },
            inputVal(e){
                console.log(e);
            }
        }
    }
</script>

引入方法

   <jpCoded style="height: 80rpx;"  @inputVal="inputVal"></jpCoded>
   import jpCoded from '@/components/jp-coded/jp-coded.vue';
    components: { jpCoded },

方法介绍 事件

参数说明

inputType 有效值