mp-verify-code

A component for mp verify code

Usage

* All attribute values are optional

``wxml

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}}"
>
`

Demo1

`wxml

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





Demo2

`wxml

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

`js
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)
})
}
}
})
``