countdown

countdown 倒计时:时分秒倒计时,支持设置大小,颜色等

组件结构

  1. <template>
  2. <view class="tui-countdown-class tui-countdown-box">
  3. <view class="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}"
  4. v-if="hours">
  5. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{h}}</view>
  6. </view>
  7. <view class="tui-countdown-colon" :style="{lineHeight:colonsize+'rpx',fontSize:colonsize+'rpx',color:coloncolor}"
  8. v-if="hours">:</view>
  9. <view class="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}">
  10. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{i}}</view>
  11. </view>
  12. <view class="tui-countdown-colon" :style="{lineHeight:colonsize+'rpx',fontSize:colonsize+'rpx',color:coloncolor}">:</view>
  13. <view class="tui-countdown-item" :style="{background:bgcolor,borderColor:bcolor,minWidth:minwidth+'rpx',minHeight:minheight+'rpx'}">
  14. <view :class="[scale?'tui-countdown-scale':'']" :style="{fontSize:size+'rpx',color:color,lineHeight:size +'rpx'}">{{s}}</view>
  15. </view>
  16. </view>
  17. </template>

组件脚本

  1. <script>
  2. export default {
  3. name: "tuiCountdown",
  4. props: {
  5. //数字框最小宽度
  6. minwidth: {
  7. type: Number,
  8. default: 26
  9. },
  10. //数字框最小高度
  11. minheight: {
  12. type: Number,
  13. default: 26
  14. },
  15. //数字框border颜色
  16. bcolor: {
  17. type: String,
  18. default: "#333"
  19. },
  20. //数字框背景颜色
  21. bgcolor: {
  22. type: String,
  23. default: "#fff"
  24. },
  25. //数字框字体大小
  26. size: {
  27. type: Number,
  28. default: 24
  29. },
  30. //数字框字体颜色
  31. color: {
  32. type: String,
  33. default: "#333"
  34. },
  35. //是否缩放 0.8
  36. scale: {
  37. type: Boolean,
  38. default: false
  39. },
  40. //冒号大小
  41. colonsize: {
  42. type: Number,
  43. default: 28
  44. },
  45. //冒号颜色
  46. coloncolor: {
  47. type: String,
  48. default: "#333"
  49. },
  50. //剩余时间
  51. time: {
  52. type: Object,
  53. default: {
  54. hours: 0,
  55. minute: 0,
  56. second: 0
  57. }
  58. },
  59. //是否包含小时
  60. hours: {
  61. type: Boolean,
  62. default: true
  63. }
  64. },
  65. data() {
  66. return {
  67. countdown: null,
  68. h: '00',
  69. i: '00',
  70. s: '00'
  71. };
  72. },
  73. created() {
  74. this.doLoop()
  75. },
  76. destroyed() {
  77. clearInterval(this.countdown)
  78. this.countdown = null
  79. },
  80. methods: {
  81. toSeconds(hours, minutes, seconds) {
  82. return (hours * 60 * 60) + (minutes * 60) + seconds
  83. },
  84. endOfTime() {
  85. clearInterval(this.countdown)
  86. this.countdown = null;
  87. this.$emit('end', {});
  88. },
  89. doLoop: function() {
  90. let seconds = this.toSeconds(this.time.hours || 0, this.time.minute || 0, this.time.second)
  91. this.countDown(seconds)
  92. this.countdown = setInterval(() => {
  93. seconds--
  94. if (seconds < 0) {
  95. this.endOfTime()
  96. return
  97. }
  98. this.countDown(seconds)
  99. }, 1000)
  100. },
  101. countDown(seconds) {
  102. let [hour, minute, second] = [0, 0, 0]
  103. if (seconds > 0) {
  104. hour = Math.floor(seconds / (60 * 60))
  105. minute = Math.floor(seconds / 60) - (hour * 60)
  106. second = Math.floor(seconds) - (hour * 60 * 60) - (minute * 60)
  107. } else {
  108. this.endOfTime()
  109. }
  110. hour = hour < 10 ? ('0' + hour) : hour
  111. minute = minute < 10 ? ('0' + minute) : minute
  112. second = second < 10 ? ('0' + second) : second
  113. this.h = hour;
  114. this.i = minute;
  115. this.s = second
  116. }
  117. }
  118. }
  119. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "minwidth" : 数字框最小宽度,类型:"Number",默认值:26
     "minheight" : 数字框最小高度,类型:"Number",默认值:26
     "bcolor" : 数字框border颜色,类型:"String",默认值:"#333"
     "bgcolor" : 数字框背景颜色,类型:"String",默认值:"#fff"
     "size" : 数字框字体大小,类型:"Number",默认值:24
     "color" : 数字框字体颜色,类型:"String",默认值:"#333"
     "scale" : 是否缩放数字 0.8,类型:"Boolean",默认值:false
     "colonsize" : 冒号大小,类型:"Number",默认值:28
     "coloncolor" : 冒号颜色,类型:"String",默认值:"#333"
     "time" : 剩余时间,类型:"Object",默认值:
              {
                hours: 0,
                minute: 0,
                second: 0
             }
     "hours" : 是否包含小时,类型:"Boolean",默认值:true

 methods:
   "toSeconds":将时间转化成秒
   "endOfTime":倒计时结束事件
   "doLoop":倒计时方法
   "countDown":倒计时时间显示处理

示例

... 此处省略n行,下载源码查看

top-dropdown extend-alert