时间:2021-07-01 10:21:17 帮助过:4人阅读
需要对预约单进行超时计算,但是后台和客户端时间不能保证一定一直,所以后台返回客户提交时间和请求结束时间的时间差进行计算。
效果如下(此处只是demo效果,所以有点丑。)
父页面
- <template>
- <div>
- <div class="dateDiv" :key="index" v-for="(item,index) in TimeArray">
- <p>{{item.name}}</p>
- <dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent>
- <el-button @click="delUnit(index)">删除</el-button>
- </div>
- </div>
- </template>
- <script>
- import datajson from '../index/data.json'
- import dateComponent from './dateComponent'
- export default {
- name:'timestamp',
- components:{
- dateComponent
- },
- data(){
- return {
- TimeArray: datajson.timestamp.TimeArray
- /*
- "timestamp":{
- "TimeArray":[{
- "name":"预约单2",
- "timeDif":"855000"
- },{
- "name": "预约单2",
- "timeDif": "801000"
- },{
- "name": "预约单3",
- "timeDif": "95000"
- },{
- "name": "预约单4",
- "timeDif": "45000"
- },{
- "name": "预约单5",
- "timeDif": "495000"
- },{
- "name": "预约单6",
- "timeDif": "195000"
- }]
- }
- */
- }
- },
- methods:{
- delUnit:function (index) {
- this.TimeArray.splice(index,1)
- }
- }
- }
- </script>
- <style scoped>
- .dateDiv{
- display: inline-block;
- border: 1px solid #e5e5e5;
- width: 200px;
- height: 80px;;
- }
- </style>
超时计算组件 overtimeComponent.vue
- <template>
- <div>
- <span>{{formatTimeStamp}}</span>
- </div>
- </template>
- <script>
- export default {
- props:["dateTimeStamp","index"],
- name:'dateComponent',
- data(){
- return {
- flag:false,
- formatTimeStamp:"",
- interval : ""
- }
- },
- mounted() {
- var difValue = parseInt(this.dateTimeStamp);
- this.formatTimeStamp = this.setResultStr(difValue)
- this.interval = setInterval(() => {
- difValue += 1000
- this.formatTimeStamp = this.setResultStr(difValue)
- }, 1000);
- },
- beforeDestroy (){
- clearInterval(this.interval)
- },
- methods:{
- setResultStr:function (difValue) {
- var day = Math.floor(difValue / 1000 / 60 / 60 / 24);//天
- difValue = difValue % (1000 * 60 * 60 * 24);
- var hour = Math.floor(difValue / 1000 / 60 / 60);//小时
- difValue = difValue % (1000 * 60 * 60);
- var min = Math.floor(difValue / 1000 / 60);//分钟
- difValue = difValue % (1000 * 60);
- var second = Math.floor(difValue / 1000);
- if(day === 0 && hour==0 && min == 0){
- return "超时:" + second + "秒"
- }else if(day === 0 && hour==0){
- return "超时:" + min + "分" + second + "秒"
- }else if(day === 0){
- return "超时:" + hour + "小时" + min + "分" + second + "秒"
- }else{
- return "超时:" + day + "天" + hour + "小时" + min + "分" + second + "秒"
- }
- }
- }
- }
- </script>
- <style scoped>
- </style>
总结
以上所述是小编给大家介绍的vue超时计算的组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!