QinUi

# Countdown 倒计时

该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间紧迫感，提示用户进行某一个行为操作。

# 基础用法

设置 format="mm分ss秒" 可格式化展示。

<template>
  <qinui-countdown v-model="theTime" format="mm分ss秒" />
</template>

<script>
  export default {
    data() {
      return {
        theTime: 0,
      };
    },
    onLoad() {
      this.theTime = 2 * 60 * 1000;
    },
  };
</script>

# 毫秒级渲染

<template>
  <qinui-countdown v-model="theTime" format="HH:mm:ss:SSS" :millisecond="true" />
</template>

<script>
  export default {
    data() {
      return {
        theTime: 0,
      };
    },
    onLoad() {
      this.theTime = 30 * 60 * 60 * 1000;
    },
  };
</script>

# 自定义样式

<template>
  <qinui-countdown
    v-model="theTime"
    @change="onChange"
  >
    <view style="display: flex">
      <view>
        <text style="color: red; font-size: 30rpx; line-height: 1.5">{{
          timeData.hours > 10 ? timeData.hours : '0' + timeData.hours
        }}</text>
      </view>
      <text style="color: green">:</text>
      <view>
        <text style="color: red; font-size: 30rpx; line-height: 1.5">{{
          timeData.minutes
        }}</text>
      </view>
      <text style="color: green">:</text>
      <view>
        <text style="color: red; font-size: 30rpx; line-height: 1.5">{{
          timeData.seconds
        }}</text>
      </view>
    </view>
  </qinui-countdown>
</template>

<script>
  export default {
    data() {
      return {
        timeData: {},
        theTime: 0,
      };
    },
    onLoad() {
      this.theTime = 30 * 60 * 60 * 1000;
    },
    methods: {
      onChange(e) {
        this.timeData = e;
      },
    },
  };
</script>

# 手动控制

设置 :autoStart="false" 不会自动开始

<template>
  <div>
    <qinui-countdown
      ref="countDown"
      v-model="theTime"
      format="ss:SSS"
      :autoStart="false"
      millisecond
    />
    <qinui-space>
      <qinui-button type="border" @click="onReset">重置</qinui-button>
      <qinui-button type="primary" @click="onStart">开始</qinui-button>
      <qinui-button type="border" @click="onPause">暂停</qinui-button>
    </qinui-space>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeData: {},
        theTime: 0,
      };
    },
    onLoad() {
      this.theTime = 3 * 1000;
    },
    methods: {
      //开始
      onStart() {
        this.$refs.countDown.start();
      },
      // 暂停
      onPause() {
        this.$refs.countDown.pause();
      },
      // 重置
      onReset() {
        this.$refs.countDown.reset();
      },
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue (v-model) 倒计时时长，单位ms String | Number - -
format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 String HH:mm:ss -
size 文字大小 String 28rpx 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48
type 文字类型 String default default | secondary | primary | white
autoStart 是否自动开始倒计时 Boolean true -
millisecond 是否展示毫秒倒计时 Boolean false -
diyTextStyle 自定义文字样式，如：设置边框等样式 String - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Methods

方法名 说明
change 倒计时改变的时候触发。根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
finish 倒计时结束

# Events

事件名 说明 回调参数
@click 点击触发 -

← Divider 分割线 →