汇融云链2
This commit is contained in:
73
mallplusui-uniapp-app2/components/uni-countdown/readme.md
Normal file
73
mallplusui-uniapp-app2/components/uni-countdown/readme.md
Normal file
@@ -0,0 +1,73 @@
|
||||
### CountDown 倒计时
|
||||
|
||||
倒计时组件，组件名：``uni-countdown``，代码块： uCountDown。
|
||||
|
||||
**使用方式：**
|
||||
|
||||
在 ``script`` 中引用组件
|
||||
|
||||
```javascript
|
||||
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
|
||||
export default {
|
||||
components: {uniCountdown}
|
||||
}
|
||||
```
|
||||
|
||||
一般用法
|
||||
|
||||
```html
|
||||
<uni-countdown
|
||||
:day="1"
|
||||
:hour="1"
|
||||
:minute="12"
|
||||
:second="40">
|
||||
</uni-countdown>
|
||||
```
|
||||
|
||||
不显示天数
|
||||
|
||||
```html
|
||||
<uni-countdown
|
||||
:show-day="false"
|
||||
:hour="12"
|
||||
:minute="12"
|
||||
:second="12">
|
||||
</uni-countdown>
|
||||
```
|
||||
|
||||
修改颜色
|
||||
|
||||
```html
|
||||
<uni-countdown
|
||||
color="#FFFFFF"
|
||||
background-color="#00B26A"
|
||||
border-color="#00B26A"
|
||||
:day="1"
|
||||
:hour="2"
|
||||
:minute="30"
|
||||
:second="0">
|
||||
</uni-countdown>
|
||||
```
|
||||
|
||||
实际效果参考：[https://github.com/dcloudio/uni-ui](https://github.com/dcloudio/uni-ui)
|
||||
|
||||
**uniCountDown 属性说明：**
|
||||
|
||||
|属性名|类型|默认值 |说明|
|
||||
|---|----|---|---|
|
||||
|background-color|String|#FFFFFF|背景色|
|
||||
|border-color|String|#000000|边框颜色|
|
||||
|color |String |#000000|文字颜色|
|
||||
|splitor-color|String|#000000|割符号颜色|
|
||||
|day|Number|0|天数|
|
||||
|hour|Number|0|小时|
|
||||
|minute|Number|0|分钟|
|
||||
|second|Number|0|秒|
|
||||
|show-day|Boolean|true|是否显示天数|
|
||||
|show-colon|Boolean|true|是否以冒号为分隔符|
|
||||
|
||||
**uniCountDown 事件说明：**
|
||||
|
||||
|事件称名|说明|返回参数|
|
||||
|---|----|---|
|
||||
|timeup|倒计时时间到触发事件|-|
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view class="uni-countdown">
|
||||
<view v-if="showDay && d!=0" class="uni-countdown__number" :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{d}}</view>
|
||||
<view v-if="showDay && d!=0" class="uni-countdown__splitor" :style="{color:textColor}">天</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{h}}</view>
|
||||
<view class="uni-countdown__splitor" :style="{color:textColor}">{{showColon ? ':' : '时'}}</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{i}}</view>
|
||||
<view class="uni-countdown__splitor" :style="{color:textColor}">{{showColon ? ':' : '分'}}</view>
|
||||
<view class="uni-countdown__number" :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{s}}</view>
|
||||
<view v-if="!showColon" class="uni-countdown__splitor" :style="{color:textColor}">秒</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "uni-countdown",
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "#FFFFFF"
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
// value: "#000000"
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: "#000000"
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: "#000"
|
||||
},
|
||||
day: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
|
||||
this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
toSeconds(day, hours, minutes, seconds) {
|
||||
return (day * 60 * 60 * 24) + (hours * 60 * 60) + (minutes * 60) + seconds
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup')
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24))
|
||||
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||
} else {
|
||||
this.timeUp()
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second
|
||||
}
|
||||
this.d = day
|
||||
this.h = hour
|
||||
this.i = minute
|
||||
this.s = second
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$countdown-height:44upx;
|
||||
|
||||
.uni-countdown {
|
||||
padding: 2upx 0;
|
||||
display: inline-flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
&__splitor {
|
||||
justify-content: center;
|
||||
line-height: $countdown-height;
|
||||
padding: 0 5upx;
|
||||
font-size: 24upx;
|
||||
// color: #d0d0d0;
|
||||
}
|
||||
|
||||
&__number {
|
||||
line-height: $countdown-height;
|
||||
justify-content: center;
|
||||
height: $countdown-height;
|
||||
border-radius: $uni-border-radius-base;
|
||||
// margin: 0 5upx;
|
||||
font-size: 24upx;
|
||||
// border: 1px solid #000000;
|
||||
font-size: $uni-font-size-sm;
|
||||
// padding: 0 10upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user