热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

vue设计一个倒计时秒杀的组件详解

简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:

简介:

倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的

核心思路:

  1. 1、时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 
  2. 2、开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加,
  3. 3、在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束,
  4. 4、在更新时间的函数中是否开始和结束,
  5. 5、在computed钩子中监听disable 确定按钮是否可点击
  6. 6、参加过活动在updated中停止定时器的计时,页面销毁的时候也停止计时

下边是代码
子组件  





父组件





以上所述是小编给大家介绍的vue设计一个倒计时秒杀的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
author-avatar
此人已死689
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有