如上图所示,有一个倒计时插件,使用的方式,给这个组件传个分钟和秒数就可以
下面是这个倒计时插件:
<template>
<div class="CountDown">
<p>{{minute}}:{{second}}</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: 'CountDown',
data () {
return {
minutes: 10,
seconds: 10
}
},
props: {
countTime: {
type: Object,
default: () => { }
}
},
mounted () {
this.add()
},
methods: {
num: function (n) {
return n < 10 ? '0' + n : '' + n
},
add: function () {
var _this = this
var time = window.setInterval(function () {
if (_this.seconds === 0 && _this.minutes !== 0) {
_this.seconds = 59
_this.minutes -= 1
} else if (_this.minutes === 0 && _this.seconds === 0) {
_this.seconds = 0
window.clearInterval(time)
} else {
_this.seconds -= 1
}
}, 1000)
}
},
watch: {
countTime: {
deep: true,
immediate: true,
handler: function (newVal) {
this.minutes = newVal.minute;
this.seconds = newVal.second;
}
},
second: {
handler (newVal) {
this.num(newVal)
}
},
minute: {
handler (newVal) {
this.num(newVal)
}
}
},
computed: {
second: function () {
return this.num(this.seconds)
},
minute: function () {
return this.num(this.minutes)
}
}
}
</script>
<style lang="less" scoped>
.CountDown {
color: #fff;
}
</style>
**使用方式:**
import CountDown from './count_down' //引入倒计时插件路径
<template>
<CountDown :countTime="countTime"></CountDown>
</template>
data(){
countTime: {
minute: 11,
second: 11
}
},
components: {
CountDown,
}
这个插件很好用,有兴趣,可以直接拿在项目里面使用。