index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import { createNamespace, inBrowser } from '../utils';
  2. import { raf, cancelRaf } from '../utils/dom/raf';
  3. import { isSameSecond, parseTimeData, parseFormat } from './utils';
  4. var _createNamespace = createNamespace('count-down'),
  5. createComponent = _createNamespace[0],
  6. bem = _createNamespace[1];
  7. export default createComponent({
  8. props: {
  9. millisecond: Boolean,
  10. time: {
  11. type: [Number, String],
  12. default: 0
  13. },
  14. format: {
  15. type: String,
  16. default: 'HH:mm:ss'
  17. },
  18. autoStart: {
  19. type: Boolean,
  20. default: true
  21. }
  22. },
  23. data: function data() {
  24. return {
  25. remain: 0
  26. };
  27. },
  28. computed: {
  29. timeData: function timeData() {
  30. return parseTimeData(this.remain);
  31. },
  32. formattedTime: function formattedTime() {
  33. return parseFormat(this.format, this.timeData);
  34. }
  35. },
  36. watch: {
  37. time: {
  38. immediate: true,
  39. handler: 'reset'
  40. }
  41. },
  42. activated: function activated() {
  43. if (this.keepAlivePaused) {
  44. this.counting = true;
  45. this.keepAlivePaused = false;
  46. this.tick();
  47. }
  48. },
  49. deactivated: function deactivated() {
  50. if (this.counting) {
  51. this.pause();
  52. this.keepAlivePaused = true;
  53. }
  54. },
  55. beforeDestroy: function beforeDestroy() {
  56. this.pause();
  57. },
  58. methods: {
  59. // @exposed-api
  60. start: function start() {
  61. if (this.counting) {
  62. return;
  63. }
  64. this.counting = true;
  65. this.endTime = Date.now() + this.remain;
  66. this.tick();
  67. },
  68. // @exposed-api
  69. pause: function pause() {
  70. this.counting = false;
  71. cancelRaf(this.rafId);
  72. },
  73. // @exposed-api
  74. reset: function reset() {
  75. this.pause();
  76. this.remain = +this.time;
  77. if (this.autoStart) {
  78. this.start();
  79. }
  80. },
  81. tick: function tick() {
  82. // should not start counting in server
  83. // see: https://github.com/vant-ui/vant/issues/7807
  84. if (!inBrowser) {
  85. return;
  86. }
  87. if (this.millisecond) {
  88. this.microTick();
  89. } else {
  90. this.macroTick();
  91. }
  92. },
  93. microTick: function microTick() {
  94. var _this = this;
  95. this.rafId = raf(function () {
  96. /* istanbul ignore if */
  97. // in case of call reset immediately after finish
  98. if (!_this.counting) {
  99. return;
  100. }
  101. _this.setRemain(_this.getRemain());
  102. if (_this.remain > 0) {
  103. _this.microTick();
  104. }
  105. });
  106. },
  107. macroTick: function macroTick() {
  108. var _this2 = this;
  109. this.rafId = raf(function () {
  110. /* istanbul ignore if */
  111. // in case of call reset immediately after finish
  112. if (!_this2.counting) {
  113. return;
  114. }
  115. var remain = _this2.getRemain();
  116. if (!isSameSecond(remain, _this2.remain) || remain === 0) {
  117. _this2.setRemain(remain);
  118. }
  119. if (_this2.remain > 0) {
  120. _this2.macroTick();
  121. }
  122. });
  123. },
  124. getRemain: function getRemain() {
  125. return Math.max(this.endTime - Date.now(), 0);
  126. },
  127. setRemain: function setRemain(remain) {
  128. this.remain = remain;
  129. this.$emit('change', this.timeData);
  130. if (remain === 0) {
  131. this.pause();
  132. this.$emit('finish');
  133. }
  134. }
  135. },
  136. render: function render() {
  137. var h = arguments[0];
  138. return h("div", {
  139. "class": bem()
  140. }, [this.slots('default', this.timeData) || this.formattedTime]);
  141. }
  142. });