求工时,通过这个方法,传入计划开始时间,计划结束时间,然后返回hours ,
<el-input-number v-model="hours"></el-input-number>
你的函数已经写好了,下一步就是看怎么去调用这个函数了。
你可以尝试对 “hours”赋值,例如 this.hours = getDifferTime("开始时间","结束时间")。
可以通过请求把数据取回来
计划开始和计划结束时间是接口返回来的还是用户实时输入的,如果是实时输入的,watch监听这两个值的变化然后调用getDifferTime()方法赋值给hours,如果是接口返回,拿到值的时候就触发getDifferTime()方法赋值给hours
vue写倒计时公共组件(传入开始结束时间)
可以借鉴下
//需要用到倒计时组件的地方传入开始、结束时间戳
<home-clock startTime="1256322" endTime="256354"></home-clock>
// 完整的dome
<template>
<div class="meClocker">
<div class="txt-time">{{msg}}</div>
<div class="run-time" v-if="timeobj.hours || timeobj.minutes || timeobj.seconds">
<span class="timing" v-if="timeobj.days">{{timeobj.days + '天'}}</span>
<span class="timing">{{timeobj.hours | add0}}</span>
<span class="flag-time">:</span>
<span class="timing">{{timeobj.minutes | add0}}</span>
<span class="flag-time">:</span>
<span class="timing">{{timeobj.seconds | add0}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'home-clock',
data() {
return {
clocker: "", //显示倒计时
timeobj: {
days: 0,
hours: 0,
minutes: 0,
seconds: 0
},
msg: ''
};
},
filters: {
add0: function (num) {
return num < 10 ? "0" + num : num;
}
},
props: ["startTime", "endTime"],
methods:{
timeStatus(){
clearInterval(this.go);
let begDate = new Date(this.startTime);
let endDate = new Date(this.endTime);
let end = endDate.getTime(); // 结束秒数
let beg = begDate.getTime(); // 开始秒数
let timeFunction = () => {
let date = new Date();
let now = date.getTime();
let leftTime = end - now;
let begTime = beg - now;
if (begTime >= 0) {
this.msg = '距开始';
this.timeobj = {
days: Math.floor(begTime / 1000 / 60 / 60 / 24),
hours: Math.floor(begTime / 1000 / 60 / 60 % 24),
minutes: Math.floor(begTime / 1000 / 60 % 60),
seconds: Math.floor(begTime / 1000 % 60)
};
} else if (leftTime >= 0) {
this.msg = '距结束';
this.timeobj = {
days: Math.floor(leftTime / 1000 / 60 / 60 / 24),
hours: Math.floor(leftTime / 1000 / 60 / 60 % 24),
minutes: Math.floor(leftTime / 1000 / 60 % 60),
seconds: Math.floor(leftTime / 1000 % 60)
};
} else {
this.msg = "已结束";
clearInterval(go);
}
};
timeFunction();
let go = setInterval(function () {
timeFunction();
}, 1000);
}
},
created() {
this.timeStatus()
}
};
</script>
<style scoped lang="stylus">
.meClocker
display flex
align-items: center
justify-content: center
</style>