mp-verify-code

A component for mp verify code

Usage

• All attribute values are optional

<mp-verify-code
        bind:change=""
        bind:finish=""
        type="number"
        height="116rpx"
        quantity="{{6}}"
        value=""
        gap="20rpx"
        itemStyle="border-bottom-color: blue;"
        activeItemStyle="border-bottom-color: red;"
        showUpper="{{false}}"
        showLower="{{false}}"
></mp-verify-code>

Demo1

<mp-verify-code
        focus="{{focus}}"
        value="{{value}}"
        height="116rpx"
        itemStyle="color: #1A171B"
        activeItemStyle="color: #1A171B; border-bottom-color: #6E1013;"
        bindfinish="handleVerifyCode"
        bindchange="handleCodeChange"
/>

Demo2

<mp-verify-code
        gap="20rpx"
        focus="{{focus}}"
        value="{{value}}"
        height="116rpx"
        itemStyle="color: #1A171B; border-radius: 16rpx; border: 1rpx solid orange;"
        activeItemStyle="color: #1A171B; border-radius: 16rpx; border: 1rpx solid purple;"
        bindfinish="handleVerifyCode"
        bindchange="handleCodeChange"
/>

countdown

Dep: fish-helper

npm install fish-helper

import helper from 'fish-helper'

/**
 * ticker: true / false  countdown is finished? => you can send code?
 * count_down_by_remain_seconds(callback, seconds)   default seconds is 60
 * tickTime is the value of you need
 */
Component({
	methods: {
		handleTickTime() {
			this.setData({ ticker: true, tickTime: 59 }, () => {
				stop = helper.count_down_by_remain_seconds(({ remain, obj }) => {
					if (remain <= 0) this.data.ticker = false
					this.setData({ tickTime: Number(obj.seconds), ticker: this.data.ticker })
				}, this.data.tickTime)
			})
		}
	}
})