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

简介：

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

核心思路：

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

下边是代码
子组件　　

  button[disabled]{
    cursor: not-allowed;
  }

父组件

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