Vue倒計時是一個常見的需求，可用於各類業務場景中，如秒殺活動，訂單支付限時等。在Vue中，我們可以通過一些簡單的方法實現倒計時功能，本文將從多個方面詳細介紹Vue倒計時的相關知識。
一、Vue倒計時怎麼做
Vue倒計時可以使用Vue.js提供的計時器方法，通過setInterval()和clearInterval()實現倒計時效果。我們需要將計時器方法封裝成一個組件，在組件中可以通過props接收父組件傳入的倒計時時間，實現倒計時效果。以下是一個簡單的Vue倒計時組件實現：
<template>
<div>
{{ time }}
</div>
</template>
<script>
export default {
props: {
totalTime: {
type: Number,
required: true
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
const tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(tid)
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
二、Vue倒計時結束自動載入數據
在某些業務場景中，倒計時結束後需要自動載入數據，那麼我們可以在Vue倒計時組件中加入回調函數，在計時結束的時候執行回調函數即可。以下是一個示例：
<template>
<div>
{{ time }}
</div>
</template>
<script>
export default {
props: {
totalTime: {
type: Number,
required: true
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
const tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
三、Vue倒計時組件
為了方便多次使用，我們可以將Vue倒計時組件封裝成一個單獨的組件，供其他組件進行引用。在該組件中，我們可以提供一些預設的屬性和方法，如總時間，回調函數等。以下是一個Vue倒計時組件的示例：
<template>
<div class="countdown">
{{ time }}
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
totalTime: {
type: Number,
required: true,
default: 60
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
const tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
四、Vue倒計時5秒
如果我們需要實現一個5秒倒計時，代碼實現非常簡單，只需要將Vue倒計時組件中的totalTime屬性設置為5即可。以下是一個示例：
<template>
<div class="countdown">
{{ time }}
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
totalTime: {
type: Number,
required: true,
default: 5
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
const tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
五、Vue倒計時60秒
同樣的，如果我們需要實現一個60秒倒計時，只需要將Vue倒計時組件中的totalTime屬性設置為60即可。以下是一個示例：
<template>
<div class="countdown">
{{ time }}
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
totalTime: {
type: Number,
required: true,
default: 60
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
const tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
六、Vue倒計時功能
在倒計時過程中，我們可能需要實現一些特殊的功能，如暫停和繼續，重新開始等。以下是一個帶有暫停和繼續功能的Vue倒計時組件：
<template>
<div class="countdown">
{{ time }} {{ status }}
<button @click="pause">暫停</button>
<button @click="resume">繼續</button>
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
totalTime: {
type: Number,
required: true,
default: 60
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: '',
status: '進行中',
tid: null
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
this.tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(this.tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
},
pause () {
clearInterval(this.tid)
this.status = '已暫停'
},
resume () {
this.countDown()
this.status = '進行中'
}
}
}
</script>
七、Vue倒計時方法
除了使用計時器的方法進行倒計時之外，Vue提供了一些其他的方法，如watch和computed。我們可以通過這些方法輕鬆的實現倒計時效果。以下是一個使用watch方法實現的Vue倒計時組件：
<template>
<div class="countdown">
{{ time }}
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
leftTime: {
type: Number,
required: true
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
watch: {
leftTime (newVal) {
clearInterval(this.tid)
this.countDown()
}
},
methods: {
countDown () {
let time = this.leftTime
this.tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(this.tid)
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
}
}
}
</script>
八、Vue倒計時取消
在某些業務場景中，我們可能需要在倒計時進行的過程中取消倒計時，我們可以在Vue倒計時組件中加入取消方法。以下是一個Vue倒計時組件的示例：
<template>
<div class="countdown">
{{ time }}
<button @click="cancel">取消</button>
</div>
</template>
<script>
export default {
name: 'Countdown',
props: {
totalTime: {
type: Number,
required: true,
default: 60
},
callback: {
type: Function,
required: false
}
},
data () {
return {
time: ''
}
},
created () {
this.countDown()
},
methods: {
countDown () {
let time = this.totalTime
this.tid = setInterval(() => {
if (time > 0) {
time --
this.time = this.formatTime(time)
} else {
clearInterval(this.tid)
if (this.callback) {
this.callback()
}
}
}, 1000)
},
formatTime (time) {
const minute = Math.floor(time / 60)
const second = time % 60
return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
},
cancel () {
clearInterval(this.tid)
// 如果還有其他回調，也可以在這裡執行
}
}
}
</script>
九、Vue倒計時按鈕組件
在許多業務
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/257823.html
微信掃一掃 
支付寶掃一掃 