小程序验证码组件实例

<view class='input-cell'>
  <view class="title">{{title}}</view>
  <input class="input" type="{{type}}" placeholder="{{placeholder}}" value="{{value}}" bindinput="input"></input>
  <slot name='right'></slot>
</view>

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180rpx;
  height: 55rpx;
  background: var(--main_color);
  border-radius: 8rpx;
  font-size: 28rpx;
  font-family: LoongType-ChiZGB-West;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

let interval
let runing
const time = 3
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    text: '获取验证码',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickBtn() {
      if (runing) return
      if(!interval) {
        runing = true
        this.setData({
          text: time,
        })
        this.triggerEvent('click')
        interval = setInterval(() => {
          if(this.data.text < 2) {
            runing = false
            this.setData({
              text: '获取验证码'
            })
            clearInterval(interval)
            interval = null
          }else {
            this.setData({
              text: --this.data.text
            })
          }
        }, 1000)
      }
    }
  }
})