T-UVUE-UI1.0.0

Appearance

CountDown 倒计时 ​

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title="倒计时">
		<t-card title="CountDown 倒计时" class="mlrt.30" sub-title="倒计时组件用于在界面上显示一个倒计时，可以自定义倒计时格式和持续时间。它的功能亮点包括：支持开始、暂停和继续倒计时，以及停止倒计时。使用场景包括：活动倒计时、商品促销倒计时、会议倒计时等。组件还提供了插槽，允许自定义倒计时显示内容。"></t-card>
		<introduction title="基础功能">
			<t-count-down class="mb.15" :time="50000"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="primary"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="error"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="warning"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="success"></t-count-down>
		</introduction>
		<introduction title="设置格式">
			<t-count-down class="mb.15" :time="50000" format="d天h时M分s秒"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="primary" format="d天h时M分s秒"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="error" format="d天h时M分s秒"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="warning" format="d天h时M分s秒"></t-count-down>
			<t-count-down class="mb.15" :time="50000" type="success" format="d天h时M分s秒"></t-count-down>
		</introduction>
		<introduction title="自定义样式">
			<t-count-down :time="5000000">
				<template v-slot:default="{ hours,minutes,seconds }">
					<t-row class="fl">
						<view class="timers-sty">
							<text class="txt">{{hours}}</text>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<text class="txt">{{minutes}}</text>
						</view>
						<text class="pl">:</text>
						<view class="timers-sty">
							<text class="txt">{{seconds}}</text>
						</view>
					</t-row>
				</template>
			</t-count-down>
		</introduction>
		<introduction title="自由控制">
			<t-count-down ref="tCountDown" class="mb.25" :time="50000" type="success"></t-count-down>
			<t-button class="mb.25" type="primary" @click="start">开始</t-button>
			<t-button class="mb.25" type="error" @click="pause">暂停</t-button>
			<t-button class="mb.25" type="warning" @click="continues">继续</t-button>
			<t-button class="mb.25" type="success" @click="stop">结束</t-button>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			start() {
				const ins = this.$refs['tCountDown'] as ComponentPublicInstance
				ins.$callMethod('start')
			},
			pause() {
				const ins = this.$refs['tCountDown'] as ComponentPublicInstance
				ins.$callMethod('pause')
			},
			continues() {
				const ins = this.$refs['tCountDown'] as ComponentPublicInstance
				ins.$callMethod('continues')
			},
			stop() {
				const ins = this.$refs['tCountDown'] as ComponentPublicInstance
				ins.$callMethod('stops')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pl {
		color: #f56c6c;
		font-weight: bold;
		padding: 0 5rpx;
	}

	.timers-sty {

		background-color: #f56c6c;
		border-radius: 5rpx;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.txt {
			color: #fff;
		}
	}
</style>

Props ​

名称描述类型默认值可选值
time倒计时时长，单位为秒Number0-
format倒计时显示格式String'hh:MM:ss'-

Events ​

事件名描述回调参数版本
change倒计时变化时触发的事件(currentTime)