一、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倒计时按钮组件
在许多业务