更新记录

1.0.2(2019-06-28) 下载此版本

修复重新设置


平台兼容性

min-countdown 1.0.2版本,现在已支持重设倒计时

//我就喜欢修改别人的组件
<template>
  <view class="app">
    <view>基本用法</view>
    <min-countdown :targetTime="time1" @callback="callback"></min-countdown>
    <view>修改样式用法</view>
    <min-countdown :targetTime="time2" countdownClass="red" @callback="callback"></min-countdown>
    <view>高级用法</view>
    <min-countdown :targetTime="time3" countdownClass="red" @callback="callback" :format="format"></min-countdown>
     <view @tap="reset">重设倒计时</view>
  </view>
</template>

import minCountdown from '@/components/min-countdown'
export default {
  components: {
    minCountdown
  },
  data () {
    return {
      time1: new Date().getTime() + 15000,
      time2: new Date().getTime() + 25000,
      time3: new Date().getTime() + 25000000000,
      format: `<div>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%d0}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%d1}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%d2}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">-</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%h0}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%h1}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">:</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%m0}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%m1}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">:</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%s0}</span>
        <span style="background: #dedede; color: #fff; width: 20px; text-align: center; display: inline-block;">{%s1}</span>
        </div>`
    }
  },
  methods: {
    callback () {
      console.log('倒计时结束')
    },
    reset:function(e){
    this.time2=new Date().getTime() + 25*1000; 
    this.time1=new Date().getTime() + 25*1000; 
    this.time3=new Date().getTime() + 25*1000; 
    }
  }
}

<style>
.red {
  color: red;
  font-size: 40rpx;
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问