验证码120秒倒计时
<template>
<div>
<i slot="suffix" class="el-getcode" v-if="retransmit" @click="getcode">获取验证码</i>
<i slot="suffix" class="el-getcode" v-else>重新发送({
{seconds}})</i>
</div>
<template>
<script>
export default{
data(){
return{
seconds:120,
retransmit:true
}
},
methods: {
getcode() {
this.retransmit = false
this.timer = setInterval(()=>{
this.seconds--
if(this.seconds===0){
this.retransmit = true
clearInterval(this.timer)
}
},1000)
}
}
}
</script>
十五分钟倒计时
<template>
<div>
<p>{
{minute}}:{
{second}}</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {
minutes: 15,
seconds: 0
}
},
mounted () {
this.add()
},
methods: {
num: function (n) {
return n < 10 ? '0' + n : '' + n
},
add() {
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: {
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>