更新记录

1.0.0（2025-02-23） 下载此版本

初始化

平台兼容性

iasei-verify-code

组件介绍

本组件是获取验证码倒计时操作的封装。

使用方式

<template>
    <iasei-body title="获取验证码" header-background="#3fb8ff" header-color="#fff">
        <view class="content">
            <uni-section title="例子" >
                <uni-easyinput placeholder="请输入">
                    <template #right>
                        <view style="padding: 10rpx 20rpx;">
                            <iasei-verify-code :limit="60" @start="handleStart" @end="handleEnd"></iasei-verify-code>
                        </view>
                    </template>
                </uni-easyinput>
            </uni-section>
            <uni-section title="插槽" >
                <view>
                    <label>无操作：</label>
                    <iasei-verify-code style="margin: auto;" :limit="120" @start="handleStart" @end="handleEnd">
                        获取验证码2
                        <template #time="{time}">
                            倒计时{{time}}秒
                        </template>
                    </iasei-verify-code>
                </view>
                <view>
                    <label>倒计时：</label>
                    <iasei-verify-code style="margin: auto;" :limit="120" @start="handleStart" @end="handleEnd">
                        获取验证码2
                        <template #time="{time}">
                            倒计时{{time}}秒
                        </template>
                    </iasei-verify-code>
                </view>

            </uni-section>
        </view>
    </iasei-body>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
            }
        },
        onLoad() {
        },
        methods: {
            handleStart(start){
                start()
                console.log("倒计时开始")
            },
            handleEnd(){
                console.log("倒计时结束")
            }
        }
    }
</script>

<style>
    .content {
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

</style>

属性说明

事件

方法

插槽