-
Notifications
You must be signed in to change notification settings - Fork 472
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
212 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
323 changes: 162 additions & 161 deletions
323
uni_modules/uview-ui/components/u-count-down/u-count-down.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,162 +1,163 @@ | ||
| <template> | ||
| <view class="u-count-down"> | ||
| <slot> | ||
| <text class="u-count-down__text">{{ formattedTime }}</text> | ||
| </slot> | ||
| </view> | ||
| </template> | ||
|
|
||
| <script> | ||
| import props from './props.js'; | ||
| import { | ||
| isSameSecond, | ||
| parseFormat, | ||
| parseTimeData | ||
| } from './utils'; | ||
| /** | ||
| * u-count-down 倒计时 | ||
| * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。 | ||
| * @tutorial https://uviewui.com/components/countDown.html | ||
| * @property {String | Number} time 倒计时时长，单位ms （默认 0 ） | ||
| * @property {String} format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 （默认 'HH:mm:ss' ） | ||
| * @property {Boolean} autoStart 是否自动开始倒计时 （默认 true ） | ||
| * @property {Boolean} millisecond 是否展示毫秒倒计时 （默认 false ） | ||
| * @event {Function} finish 倒计时结束时触发 | ||
| * @event {Function} change 倒计时变化时触发 | ||
| * @event {Function} start 开始倒计时 | ||
| * @event {Function} pause 暂停倒计时 | ||
| * @event {Function} reset 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | ||
| * @example <u-count-down :time="time"></u-count-down> | ||
| */ | ||
| export default { | ||
| name: 'u-count-down', | ||
| mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | ||
| data() { | ||
| return { | ||
| timer: null, | ||
| // 各单位(天，时，分等)剩余时间 | ||
| timeData: parseTimeData(0), | ||
| // 格式化后的时间，如"03:23:21" | ||
| formattedTime: '0', | ||
| // 倒计时是否正在进行中 | ||
| runing: false, | ||
| endTime: 0, // 结束的毫秒时间戳 | ||
| remainTime: 0, // 剩余的毫秒时间 | ||
| } | ||
| }, | ||
| watch: { | ||
| time(n) { | ||
| this.reset() | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.init() | ||
| }, | ||
| methods: { | ||
| init() { | ||
| this.reset() | ||
| }, | ||
| // 开始倒计时 | ||
| start() { | ||
| if (this.runing) return | ||
| // 标识为进行中 | ||
| this.runing = true | ||
| // 结束时间戳 = 此刻时间戳 + 剩余的时间 | ||
| this.endTime = Date.now() + this.remainTime | ||
| this.toTick() | ||
| }, | ||
| // 根据是否展示毫秒，执行不同操作函数 | ||
| toTick() { | ||
| if (this.millisecond) { | ||
| this.microTick() | ||
| } else { | ||
| this.macroTick() | ||
| } | ||
| }, | ||
| macroTick() { | ||
| this.clearTimeout() | ||
| // 每隔一定时间，更新一遍定时器的值 | ||
| // 同时此定时器的作用也能带来毫秒级的更新 | ||
| this.timer = setTimeout(() => { | ||
| // 获取剩余时间 | ||
| const remain = this.getRemainTime() | ||
| // 重设剩余时间 | ||
| if (!isSameSecond(remain, this.remainTime) || remain === 0) { | ||
| this.setRemainTime(remain) | ||
| } | ||
| // 如果剩余时间不为0，则继续检查更新倒计时 | ||
| if (this.remainTime !== 0) { | ||
| this.macroTick() | ||
| } | ||
| }, 30) | ||
| }, | ||
| microTick() { | ||
| this.clearTimeout() | ||
| this.timer = setTimeout(() => { | ||
| this.setRemainTime(this.getRemainTime()) | ||
| if (this.remainTime !== 0) { | ||
| this.microTick() | ||
| } | ||
| }, 30) | ||
| }, | ||
| // 获取剩余的时间 | ||
| getRemainTime() { | ||
| // 取最大值，防止出现小于0的剩余时间值 | ||
| return Math.max(this.endTime - Date.now(), 0) | ||
| }, | ||
| // 设置剩余的时间 | ||
| setRemainTime(remain) { | ||
| this.remainTime = remain | ||
| // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象 | ||
| const timeData = parseTimeData(remain) | ||
| // 如果有传入slot内容，则发出change事件 | ||
| if(this.$slots.default || this.$slots.$default) { | ||
| this.$emit('change', timeData) | ||
| } | ||
| // 得出格式化后的时间 | ||
| this.formattedTime = parseFormat(this.format, timeData) | ||
| // 如果时间已到，停止倒计时 | ||
| if (remain <= 0) { | ||
| this.pause() | ||
| this.$emit('finish') | ||
| } | ||
| }, | ||
| // 重置倒计时 | ||
| reset() { | ||
| this.pause() | ||
| this.remainTime = this.time | ||
| this.setRemainTime(this.remainTime) | ||
| if (this.autoStart) { | ||
| this.start() | ||
| } | ||
| }, | ||
| // 暂停倒计时 | ||
| pause() { | ||
| this.runing = false; | ||
| this.clearTimeout() | ||
| }, | ||
| // 清空定时器 | ||
| clearTimeout() { | ||
| clearTimeout(this.timer) | ||
| this.timer = null | ||
| } | ||
| }, | ||
| beforeDestroy() { | ||
| this.clearTimeout() | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "../../libs/css/components.scss"; | ||
| $u-count-down-text-color:$u-content-color !default; | ||
| $u-count-down-text-font-size:15px !default; | ||
| $u-count-down-text-line-height:22px !default; | ||
| .u-count-down { | ||
| &__text { | ||
| color:$u-count-down-text-color; | ||
| font-size:$u-count-down-text-font-size; | ||
| line-height:$u-count-down-text-line-height; | ||
| } | ||
| } | ||
| <template> | ||
| <view class="u-count-down"> | ||
| <slot> | ||
| <text class="u-count-down__text">{{ formattedTime }}</text> | ||
| </slot> | ||
| </view> | ||
| </template> | ||
|
|
||
| <script> | ||
| import props from './props.js'; | ||
| import { | ||
| isSameSecond, | ||
| parseFormat, | ||
| parseTimeData | ||
| } from './utils'; | ||
| /** | ||
| * u-count-down 倒计时 | ||
| * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。 | ||
| * @tutorial https://uviewui.com/components/countDown.html | ||
| * @property {String | Number} time 倒计时时长，单位ms （默认 0 ） | ||
| * @property {String} format 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 （默认 'HH:mm:ss' ） | ||
| * @property {Boolean} autoStart 是否自动开始倒计时 （默认 true ） | ||
| * @property {Boolean} millisecond 是否展示毫秒倒计时 （默认 false ） | ||
| * @event {Function} finish 倒计时结束时触发 | ||
| * @event {Function} change 倒计时变化时触发 | ||
| * @event {Function} start 开始倒计时 | ||
| * @event {Function} pause 暂停倒计时 | ||
| * @event {Function} reset 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 | ||
| * @example <u-count-down :time="time"></u-count-down> | ||
| */ | ||
| export default { | ||
| name: 'u-count-down', | ||
| mixins: [uni.$u.mpMixin, uni.$u.mixin, props], | ||
| data() { | ||
| return { | ||
| timer: null, | ||
| // 各单位(天，时，分等)剩余时间 | ||
| timeData: parseTimeData(0), | ||
| // 格式化后的时间，如"03:23:21" | ||
| formattedTime: '0', | ||
| // 倒计时是否正在进行中 | ||
| runing: false, | ||
| endTime: 0, // 结束的毫秒时间戳 | ||
| remainTime: 0, // 剩余的毫秒时间 | ||
| } | ||
| }, | ||
| watch: { | ||
| time(n) { | ||
| this.reset() | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.init() | ||
| }, | ||
| methods: { | ||
| init() { | ||
| this.reset() | ||
| }, | ||
| // 开始倒计时 | ||
| start() { | ||
| if (this.runing) return | ||
| // 标识为进行中 | ||
| this.runing = true | ||
| // 结束时间戳 = 此刻时间戳 + 剩余的时间 | ||
| this.endTime = Date.now() + this.remainTime | ||
| this.toTick() | ||
| }, | ||
| // 根据是否展示毫秒，执行不同操作函数 | ||
| toTick() { | ||
| if (this.millisecond) { | ||
| this.microTick() | ||
| } else { | ||
| this.macroTick() | ||
| } | ||
| }, | ||
| macroTick() { | ||
| this.clearTimeout() | ||
| // 每隔一定时间，更新一遍定时器的值 | ||
| // 同时此定时器的作用也能带来毫秒级的更新 | ||
| this.timer = setTimeout(() => { | ||
| // 获取剩余时间 | ||
| const remain = this.getRemainTime() | ||
| // 重设剩余时间 | ||
| if (!isSameSecond(remain, this.remainTime) || remain === 0) { | ||
| this.setRemainTime(remain) | ||
| } | ||
| // 如果剩余时间不为0，则继续检查更新倒计时 | ||
| if (this.remainTime !== 0) { | ||
| this.macroTick() | ||
| } | ||
| }, 30) | ||
| }, | ||
| microTick() { | ||
| this.clearTimeout() | ||
| this.timer = setTimeout(() => { | ||
| this.setRemainTime(this.getRemainTime()) | ||
| if (this.remainTime !== 0) { | ||
| this.microTick() | ||
| } | ||
| }, 50) | ||
| }, | ||
| // 获取剩余的时间 | ||
| getRemainTime() { | ||
| // 取最大值，防止出现小于0的剩余时间值 | ||
| return Math.max(this.endTime - Date.now(), 0) | ||
| }, | ||
| // 设置剩余的时间 | ||
| setRemainTime(remain) { | ||
| this.remainTime = remain | ||
| // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象 | ||
| const timeData = parseTimeData(remain) | ||
| this.$emit('change', timeData) | ||
| // 得出格式化后的时间 | ||
| this.formattedTime = parseFormat(this.format, timeData) | ||
| // 如果时间已到，停止倒计时 | ||
| if (remain <= 0) { | ||
| this.pause() | ||
| this.$emit('finish') | ||
| } | ||
| }, | ||
| // 重置倒计时 | ||
| reset() { | ||
| this.pause() | ||
| this.remainTime = this.time | ||
| this.setRemainTime(this.remainTime) | ||
| if (this.autoStart) { | ||
| this.start() | ||
| } | ||
| }, | ||
| // 暂停倒计时 | ||
| pause() { | ||
| this.runing = false; | ||
| this.clearTimeout() | ||
| }, | ||
| // 清空定时器 | ||
| clearTimeout() { | ||
| clearTimeout(this.timer) | ||
| this.timer = null | ||
| } | ||
| }, | ||
| beforeDestroy() { | ||
| this.clearTimeout() | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style | ||
| lang="scss" | ||
| scoped | ||
| > | ||
| @import "../../libs/css/components.scss"; | ||
| $u-count-down-text-color:$u-content-color !default; | ||
| $u-count-down-text-font-size:15px !default; | ||
| $u-count-down-text-line-height:22px !default; | ||
| .u-count-down { | ||
| &__text { | ||
| color: $u-count-down-text-color; | ||
| font-size: $u-count-down-text-font-size; | ||
| line-height: $u-count-down-text-line-height; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.