Activity countdown component based on vue2.0

• vue2-countdown

• Activity countdown component based on vue2.0

• You can use the current time of the server

• When the countdown starts or ends, you can customize the callback

• Document: https://cgygd.github.io/vue2-countdown/

• demo：https://cgygd.github.io/vue2-countdown/example/index.html

Example.png

installation

1.cnpm / asl

npm install vue2-countdown --save

2. Git download source code

git clone https://github.com/cgygd/vue2-countdown

use

<count-down v-on:end_callback="countDownE_cb()"
                :currentTime="currentTime"
                :startTime="startTime"
                :endTime="endTime"
                :tipText="'距离订单开始还有'"
                :tipTextEnd="'距离订单关闭还剩'"
                :endText="'订单已关闭'"
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'">
</count-down>

 

import CountDown from 'vue2-countdown'
components: {
    CountDown
},
data() {
     return {
                currentTime:0,
                startTime:0,
                endTime:0,
            }
        },
methods: {
  countDownS_cb: function (x) {
    console.log(x)
  },
  countDownE_cb: function (x) {
    console.log(x)
  }
}

Parameter explanation

1. currentTime - current timestamp, if not passed, the user's local time is obtained by default (it is recommended to pass the current time of the server)

   type: Number

   required : false

   default : ( new Date() ).getTime()

2. startTime - start timestamp

   type: Number

   required : true

3. endTime - end timestamp

   type: Number

   required : true

4. tipText - Tip text before the countdown starts

   type: String

   required : false

   default : distance start

5. tipTextEnd - the tip text after the countdown starts

   type: String

   required : false

   default : end of distance

6. endText - the prompt text after the countdown ends

   type: String

   required : false

   default : finished

7. dayTxt - custom display day text

   type: String

   required : false

   default : :

8. hourTxt - custom displayed hour text

   type: String

   required : false

   default : :

9. secondsTxt - customize the displayed minute text

   type: String

   required : false

   default : :

10. secondsFixed - customize the displayed seconds text

    type: String

    required : false

    default : :

Callback method

1. start_callback() - the callback method after the start countdown ends

   type: Function

   required : false

2. end_callback() - callback method after the countdown of the activity ends

   type: Function

   required : false

Problem modification

However, some problems in the vue2-countdown project were discovered during use:

1. Cannot customize the prompt text

The author commented it out in the project, which caused us to fail to display the prompt if we added this configuration in the introduction.
Solution:
1. Find the installed vue2-countdown file in node_modules, modify the vue2-countdown.vue file, and remove the comment.

Comment.png

Uncomment.png

2. In fact, only the lib/vue2-countdown.vue file is useful for the entire project. You can also copy the content of this file to your own project, create a new vue file as a component, and then uncomment the component.

2. Countdown logic problem

After the introduction, it is found that no matter what time we pass, the countdown is the end time-the start time is recalculated, instead of calculating the end time-the current time value based on the current time, so how we configure and how to refresh the result is (end-start), Actually it doesn’t seem to have anything to do with the current time

Solution : Change the original this.start to this.current. Although the author originally obtained the current timestamp passed in, but did not use it in the method. Changing start to current can ensure that the output is the length of time between the current time and the end time.