作者:此人已死689 | 来源:互联网 | 2021-09-23 05:32
简介:
倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的
核心思路:
简介:
倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的
核心思路:
- 1、时间不能是本地客户端的时间 必须是服务器的时间这里用一个settimeout代替 以为时间必须统一
- 2、开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内 参加活动按钮可以点击,并且参加过活动以后不能再参加,
- 3、在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束,
- 4、在更新时间的函数中是否开始和结束,
- 5、在computed钩子中监听disable 确定按钮是否可点击
- 6、参加过活动在updated中停止定时器的计时,页面销毁的时候也停止计时
下边是代码
子组件
父组件
以上所述是小编给大家介绍的vue设计一个倒计时秒杀的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!