1***@qq.com
1***@qq.com
  • 发布:2023-01-09 09:41
  • 更新:2023-01-09 09:41
  • 阅读:121

#插件讨论# 【 验证码输入 - 1***@qq.com 】添加跳转,新页面的input type=number focus弹出的键盘不是数字键,变成字母键

分类:uni-app
关联插件: 验证码输入

在下载的势力基础上操作的:
1.新建otherpages/details/details页面,将pages/index的页面复制进去

<template>  
    <view class="content">  
        <view class="text-area">  
            <text>请输入验证码</text>  
            <!-- <codeInput ref="codeInput" @verificationCode="verificationCode" codeType="block" :errorType="errorType"></codeInput> -->  
            <codeInput ref="codeInput" @verificationCode="verificationCode" codeType="line" :errorType="errorType" :blockNum="blockNum"></codeInput>  
        </view>  
    </view>  
</template>   

<script>  
    import codeInput from '@/components/verification-codeInput/verification-codeInput.vue'  
    export default {  
        name:'index',  
        components:{  
            codeInput  
        },  
        data() {  
            return {  
                title: 'Hello',  
                textCode:'0000',  
                errorType:false,  
                blockNum:4  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            verificationCode(code){  
                if(code!=this.textCode){  
                    uni.showToast({  
                        title:"验证不通过"  
                    })  
                    this.$refs.codeInput.errorType = true  
                }else{  
                    uni.showToast({  
                        title:"验证通过"  
                    })  
                }  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
        flex-direction: column;  
        height: 30vh;  
        justify-content: space-between;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
  1. index的页面内容删掉,添加文本
    <text @click="todetail">获取验证码</text>
    todetail() {
    uni.navigateTo({
    url:'/otherPages/detail/detail',
    complete: (complete) => {
    console.log('complete:::', complete)
    }
    })
    },
2023-01-09 09:41 负责人:无 分享
已邀请:

要回复问题请先登录注册