count-down.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. exports.ids = [7];
  2. exports.modules = {
  3. /***/ 144:
  4. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  5. "use strict";
  6. // ESM COMPAT FLAG
  7. __webpack_require__.r(__webpack_exports__);
  8. // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/count-down.vue?vue&type=template&id=2fbaab86&
  9. var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.time >= 0)?_c('div',[_c('client-only',[(_vm.isSlot)?_vm._t("default"):_c('span',[_vm._v(_vm._s(_vm.formateTime))])],2)],1):_vm._e()}
  10. var staticRenderFns = []
  11. // CONCATENATED MODULE: ./components/count-down.vue?vue&type=template&id=2fbaab86&
  12. // CONCATENATED MODULE: ./utils/parseTime.js
  13. const SECOND = 1000;
  14. const MINUTE = 60 * SECOND;
  15. const HOUR = 60 * MINUTE;
  16. const DAY = 24 * HOUR;
  17. function parseTimeData(time) {
  18. const days = Math.floor(time / DAY);
  19. const hours = sliceTwo(Math.floor(time % DAY / HOUR));
  20. const minutes = sliceTwo(Math.floor(time % HOUR / MINUTE));
  21. const seconds = sliceTwo(Math.floor(time % MINUTE / SECOND));
  22. return {
  23. days: days,
  24. hours: hours,
  25. minutes: minutes,
  26. seconds: seconds
  27. };
  28. }
  29. function sliceTwo(str) {
  30. return (0 + str.toString()).slice(-2);
  31. }
  32. function parseFormat(format, timeData) {
  33. let days = timeData.days;
  34. let hours = timeData.hours,
  35. minutes = timeData.minutes,
  36. seconds = timeData.seconds;
  37. if (format.indexOf('dd') !== -1) {
  38. format = format.replace('dd', days);
  39. }
  40. if (format.indexOf('hh') !== -1) {
  41. format = format.replace('hh', sliceTwo(hours));
  42. }
  43. if (format.indexOf('mm') !== -1) {
  44. format = format.replace('mm', sliceTwo(minutes));
  45. }
  46. if (format.indexOf('ss') !== -1) {
  47. format = format.replace('ss', sliceTwo(seconds));
  48. }
  49. return format;
  50. }
  51. // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/count-down.vue?vue&type=script&lang=js&
  52. //
  53. //
  54. //
  55. //
  56. //
  57. //
  58. //
  59. //
  60. //
  61. /* harmony default export */ var count_downvue_type_script_lang_js_ = ({
  62. components: {},
  63. props: {
  64. isSlot: {
  65. type: Boolean,
  66. default: false
  67. },
  68. time: {
  69. type: Number,
  70. default: 0
  71. },
  72. format: {
  73. type: String,
  74. default: 'hh:mm:ss'
  75. },
  76. autoStart: {
  77. type: Boolean,
  78. default: true
  79. }
  80. },
  81. watch: {
  82. time: {
  83. immediate: true,
  84. handler(value) {
  85. if (value) {
  86. this.reset();
  87. }
  88. }
  89. }
  90. },
  91. data() {
  92. return {
  93. timeObj: {},
  94. formateTime: 0
  95. };
  96. },
  97. created() {},
  98. computed: {},
  99. methods: {
  100. createTimer(fn) {
  101. return setTimeout(fn, 100);
  102. },
  103. isSameSecond(time1, time2) {
  104. return Math.floor(time1) === Math.floor(time2);
  105. },
  106. start() {
  107. if (this.counting) {
  108. return;
  109. }
  110. this.counting = true;
  111. this.endTime = Date.now() + this.remain * 1000;
  112. this.setTimer();
  113. },
  114. setTimer() {
  115. this.tid = this.createTimer(() => {
  116. let remain = this.getRemain();
  117. if (!this.isSameSecond(remain, this.remain) || remain === 0) {
  118. this.setRemain(remain);
  119. }
  120. if (this.remain !== 0) {
  121. this.setTimer();
  122. }
  123. });
  124. },
  125. getRemain() {
  126. return Math.max(this.endTime - Date.now(), 0);
  127. },
  128. pause() {
  129. this.counting = false;
  130. clearTimeout(this.tid);
  131. },
  132. reset() {
  133. this.pause();
  134. this.remain = this.time;
  135. this.setRemain(this.remain);
  136. if (this.autoStart) {
  137. this.start();
  138. }
  139. },
  140. setRemain(remain) {
  141. const {
  142. format
  143. } = this;
  144. this.remain = remain;
  145. const timeData = parseTimeData(remain);
  146. this.formateTime = parseFormat(format, timeData);
  147. this.$emit('change', timeData);
  148. if (remain === 0) {
  149. this.pause();
  150. this.$emit('finish');
  151. }
  152. }
  153. }
  154. });
  155. // CONCATENATED MODULE: ./components/count-down.vue?vue&type=script&lang=js&
  156. /* harmony default export */ var components_count_downvue_type_script_lang_js_ = (count_downvue_type_script_lang_js_);
  157. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  158. var componentNormalizer = __webpack_require__(1);
  159. // CONCATENATED MODULE: ./components/count-down.vue
  160. function injectStyles (context) {
  161. }
  162. /* normalize component */
  163. var component = Object(componentNormalizer["a" /* default */])(
  164. components_count_downvue_type_script_lang_js_,
  165. render,
  166. staticRenderFns,
  167. false,
  168. injectStyles,
  169. null,
  170. "4090b4e2"
  171. )
  172. /* harmony default export */ var count_down = __webpack_exports__["default"] = (component.exports);
  173. /***/ })
  174. };;
  175. //# sourceMappingURL=count-down.js.map