QinUi

# Code 验证码倒计时

考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景。

# 基础用法

<template>
  <div>
    <qinui-code
      ref="theCodeNode"
      @change="codeChange"
      seconds="20"
      change-text="XS获取"
      @start="disabled = true"
      @end="disabled = false"
    ></qinui-code>
    <qinui-button
      @tap="getCode"
      type="primary"
      size="small"
      :disabled="disabled"
      :content="tips"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
        disabled: false,
      };
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.theCodeNode.canGetCode) {
          // 模拟向后端请求验证码
          qin.showLoading({
            title: '正在获取验证码',
          });
          setTimeout(() => {
            qin.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            qin.showToast({
              title: '验证码已发送',
              icon: 'none',
            });
            // 通知验证码组件内部开始倒计时
            this.$refs.theCodeNode.start();
          }, 2000);
        } else {
          qin.showToast({
            title: '倒计时结束后再发送',
            icon: 'none',
          });
        }
      },
    },
  };
</script>

# 文本样式

<template>
  <div>
    <qinui-code
      ref="theCodeNode"
      @change="codeChange"
      keep-running
      start-text="点我获取验证码"
    ></qinui-code>
    <text @tap="getCode" class="qinui-page__code-text">{{ tips }}</text>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
      };
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.theCodeNode.canGetCode) {
          // 模拟向后端请求验证码
          qin.showLoading({
            title: '正在获取验证码',
          });
          setTimeout(() => {
            qin.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            qin.showToast({
              title: '验证码已发送',
              icon: 'none',
            });
            // 通知验证码组件内部开始倒计时
            this.$refs.theCodeNode.start();
          }, 2000);
        } else {
          qin.showToast({
            title: '倒计时结束后再发送',
            icon: 'none',
          });
        }
      },
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值
seconds 倒计时总秒数，单位：秒 Number 60 -
startText 尚未开始时提示 string 获取验证码 -
changeText 正在倒计时中的提示 string X秒重新获取 -
endText 倒计时结束时的提示 string 重新获取 -
keepRunning 是否在H5刷新或各端返回再进入时继续倒计时 Boolean false -
qinqueKey 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了 string - -

# Methods

方法名 说明
canGetCode 是否可以发送 Boolean
start 开始发送

# Events

事件名 说明 回调参数
@change 倒计时期间，每秒触发一次 -
@start 开始倒计时触发 -
@end 结束倒计时触发 -

← Countdown 倒计时 →