更新记录

1.0.1(2022-06-19)

更新文档,添加事件

1.0.0(2022-06-19)

获取验证码


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

获取手机验证码

用法示例

常规用法:

<template>
    <view>
        <!--    默认用法-->
        <yl-phone-msg-code
                :req-mobile-code="getCode"
        />
        <!--    电话输入框前缀-->
        <yl-phone-msg-code
                mobile-prepend="+86"
                :req-mobile-code="getCode"
        />
        <!--    自定义样式及自定义按钮-->
        <view  style="background: #13141a;padding:20rpx 0;">
            <yl-phone-msg-code
                    mobile-prepend="+86"
                    :req-mobile-code="getCode"
                    :mobile-style="customStyle"
                    :mobile-prepend-style="customStyle"
                    :codeStyle="customStyle"
                    @codeChange="codeChange"
            >
                <template #getCode="{msgCodeText}">
                    <view class="getCode">
                        <view class="getCodeInner">{{ msgCodeText }}</view>
                    </view>
                </template>
            </yl-phone-msg-code>
        </view>

    </view>
</template>

<script>
    import {reqMobileCode} from "../api/common";

    export default {
        name: "PhoneMsgCodeExample",
        data() {
            return {
                customStyle:{
                    color:"#ffffff"
                },// 自定义样式
            }
        },
        mounted() {
        },
        methods: {
            /**
             * 获取验证码
             * @param mobile
             * @param code
             * @returns {Promise<void>}
             */
            async getCode(mobile,code){
                let result = await reqMobileCode(mobile)
                console.log(result)
            },
            /**
             * 验证码改变
             * @param code
             */
            codeChange(code){
                console.log(code)
            }

        }
    }
</script>

<style lang="scss" scoped>
    .getCode{
        width: 160rpx;
        background: linear-gradient(90deg,#f6b847, #f1950e);
        padding:2rpx;
    .getCodeInner{
        font-size: 20rpx;
        text-align: center;
        color: #faad14;
        background: #13141a;
        padding:10rpx 20rpx;
    }
    }
</style>
Props
参数 说明 类型 可选值 默认值
reqMobileCode 获取验证码函数 [Function] -- --
mobilePrepend 手机号前缀 String -- --
mobilePrependStyle 输入框前置样式 Object / String -- --
msgCodeTextConfig 发送按钮文字 Object -- --
getCodeStyle 获取验证码样式 Object / String -- --
mobileStyle 电话输入框样式 Object / String -- --
codeStyle 验证码输入框样式 Object / String -- --
Events 事件
函数名 说明 回调参数
reset 重置 --
codeChange 验证码输入框改变 code

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问