Vue 倒计时组件封装
项目中需要用到倒计时的功能,封装了一个组件。
代码解读:
- 1:created周期中获取传入参数时间的剩余秒数: this.initSecondsLeft() 并绑定间隔事件 intervalEvent
- 2: 在computed属性中刷新当前剩余时间的结果
- 3: 结束后触发父组件的handle-done事件,父组件做出对应操作,如弹窗或信息提示
<template>
<div>
<div style="text-align:center;color:red;">
<h2>{{showTimeLeft}}</h2>
</div>
<div style="text-align:center;color:green;">
<h2>{{showTimeLeft}}</h2>
</div>
</div>
</template>
<script>
export default {
name: "timeCountDown",
props: {
endDate: String,
},
data() {
return {
timeLeft: 0,
bundleIntervalEvent: ""
};
},
computed: {
//用计算属性显示结果
showTimeLeft() {
//剩余秒数<=0
if (this.timeLeft <= 0) {
// 结束event
this.$emit('handle-done', true)
return "已过期";
}
// 剩余秒数>0
else {
let day = Math.floor(this.timeLeft / 86400);
let hour = Math.floor((this.timeLeft % 86400) / 3600);
let min = Math.floor(((this.timeLeft % 86400) % 3600) / 60);
let sec = Math.floor(((this.timeLeft % 86400) % 3600) % 60);
return (day + "天 " + (hour < 10 ? "0" : "") + hour + ": " + (min < 10 ? "0" : "") + min + ": " + (sec < 10 ? "0" : "") + sec
);
}
}
},
methods: {
//和当前日期比较,计算剩余多少秒
initSecondsLeft() {
let currentDate = new Date();
let tmp = this.endDate.split(/[- : /]/);
let toEndDate = new Date(tmp[0], tmp[1] - 1, tmp[2], tmp[3], tmp[4], tmp[5]);
//参数日期 > 当前日期 => 获取剩余秒数
if (toEndDate > currentDate) {
this.timeLeft = Math.floor((toEndDate.getTime() - currentDate.getTime()) / 1000);
} else {
this.timeLeft = 0;
}
},
//间隔事件: 剩余秒数--, 当剩余秒数为0时,清除间隔事件.
intervalEvent() {
if (this.timeLeft > 0) {
this.timeLeft--;
} else {
clearInterval(this.bundleIntervalEvent);
}
},
},
mounted() {
},
created() {
//初始化剩余秒数
this.initSecondsLeft();
//执行间隔事件.
this.bundleIntervalEvent = setInterval(this.intervalEvent, 1000);
},
beforeDestroy() {
clearInterval(this.bundleIntervalEvent);
}
};
</script>
Vue 倒计时组件封装的更多相关文章
- vue 倒计时组件
<template> <span> <i v-text="msg"></i> </span></template& ...
- Vue回炉重造之封装防刷新考试倒计时组件
<!-- 考试倒计时组件 --> <template> <div class="time"> <p>00:{{timerCount2 ...
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
- Vue + Element UI 实现权限管理系统 (功能组件封装)
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- seventBus(封装) 一个巧妙的解决vue同级组件通讯的思路
如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...
- vue --》组件的封装 及 参数的传递
vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ...
- 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
随机推荐
- Active Directory - Creating Public and Personnel Share Folders via Script
Create and save the following scripts on the DC folder \\Winsever2019\sysvol\pandabusiness.local\scr ...
- P5198 [USACO19JAN]Icy Perimeter S (洛谷) (水搜索)
同样是因为洛谷作业不会写…… 写(水)博客啦. 直接放题目吧,感觉放在代码框里好看点 Farmer John要开始他的冰激凌生意了!他制造了一台可以生产冰激凌球的机器,然而不幸的是形状不太规则,所以他 ...
- JavaScript动画实例:粒子文本
1.粒子文本的实现原理 粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子 ...
- 013.Nginx动静分离
一 动静分离概述 1.1 动静分离介绍 为了提高网站的响应速度,减轻程序服务器(Tomcat,Jboss等)的负载,对于静态资源,如图片.js.css等文件,可以在反向代理服务器中进行缓存,这样浏览器 ...
- UVA 10653.Prince and Princess
题目 In an n * n chessboard, Prince and Princess plays a game. The squares in the chessboard are numbe ...
- sqlserver——merge用法
merge集插入,更新,删除于一体,如果要对一个表同时进行插入,更新,删除2个或3三个操作.效率要高于单个操作. merge into tableb b --被操作表using (select id, ...
- mybatis连接池
连接池 在 Mybatis 中,数据源 dataSource 共有三类,分别是: UNPOOLED : 不使用连接池的数据源.采用传统的 javax.sql.DataSource 规范中的连接池,My ...
- Crossword Answers -------行与列按序输出
题目链接:https://vjudge.net/problem/UVA-232#author=0 题意:关键句:The de nitions correspond to the rectangular ...
- MySQL 8.0.20 安装教程图文详解(windows 64位)
MySQL 8.0.20 安装教程图文详解(windows 64位) 更新时间:2020年05月09日 15:09:04 转载 作者:瘦肉粥不加糖 这篇文章主要介绍了MySQL 8.0. ...
- 12天,这本《重学Java设计模式》PDF书籍下载量9k,新增粉丝1400人,Github上全球推荐榜!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言