Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
93c4dd9f
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
93c4dd9f
编写于
2月 20, 2024
作者:
H
HRK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增 uni-countdown新增两个属性:showHour showMinute
上级
1c577e89
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
37 addition
and
35 deletion
+37
-35
docs/component/uniui/uni-countdown.md
docs/component/uniui/uni-countdown.md
+37
-35
未找到文件。
docs/component/uniui/uni-countdown.md
浏览文件 @
93c4dd9f
...
...
@@ -41,6 +41,8 @@
|minute |Number |0 |分钟 |
|second |Number |0 |秒 |
|showDay |Boolean|true |是否显示天数 |
|showHour |Boolean|true |是否显示小时 |
|showMinute |Boolean|true |是否显示分钟 |
|showColon |Boolean|true |是否以冒号为分隔符 |
|start |Boolean|true |是否初始化组件后就开始倒计时|
...
...
@@ -72,20 +74,20 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/countdown/countdown
> Template
```
vue
<
template
>
<
template
>
<view
class=
"container"
>
<uni-card
is-full
>
<text
class=
"uni-h6"
>
倒计时组件主要用于促销商品剩余时间,发送短信验证等待时间等场景
</text>
</uni-card>
</uni-card>
<uni-section
title=
"一般用法"
type=
"line"
padding
>
<uni-countdown
:day=
"1"
:hour=
"1"
:minute=
"12"
:second=
"40"
/>
</uni-section>
</uni-section>
<uni-section
title=
"不显示天数"
subTitle=
"设置 show-day = false 不显示天"
type=
"line"
padding
>
<uni-countdown
:show-day=
"false"
:hour=
"12"
:minute=
"12"
:second=
"12"
/>
</uni-section>
</uni-section>
<uni-section
title=
"文字分隔符"
subTitle=
"设置 show-colon 属性设置分隔符样式"
type=
"line"
padding
>
<uni-countdown
:minute=
"30"
:second=
"0"
:show-colon=
"false"
/>
</uni-section>
</uni-section>
<uni-section
title=
"修改颜色"
subTitle=
"设置 color \ background 属性设置组件颜色"
type=
"line"
padding
>
<uni-countdown
:day=
"1"
:hour=
"2"
:minute=
"30"
:second=
"0"
color=
"#FFFFFF"
background-color=
"#007AFF"
/>
</uni-section>
...
...
@@ -94,54 +96,54 @@
</uni-section>
<uni-section
title=
"修改颜色 + 字体大小"
type=
"line"
padding
>
<uni-countdown
:font-size=
"30"
:day=
"1"
:hour=
"2"
:minute=
"30"
:second=
"0"
color=
"#FFFFFF"
background-color=
"#007AFF"
/>
</uni-section>
</uni-section>
<uni-section
title=
"自由控制开始/暂停"
subTitle=
"设置 start 属性控制是否自动开启"
type=
"line"
padding
>
<uni-countdown
:start=
"start"
:day=
"1"
:hour=
"1"
:minute=
"12"
:second=
"40"
/>
</uni-section>
<uni-section
title=
"倒计时回调事件"
type=
"line"
padding
>
<uni-countdown
:show-day=
"false"
:second=
"timeupSecond"
@
timeup=
"timeup"
/>
</uni-section>
</uni-section>
<uni-section
title=
"动态赋值"
type=
"line"
padding
>
<uni-countdown
:show-day=
"false"
:hour=
"testHour"
:minute=
"testMinute"
:second=
"testSecond"
/>
</uni-section>
</view>
</uni-section>
</view>
</
template
>
```
> Script
```
vue
<
script
>
export
default
{
components
:
{},
data
()
{
return
{
testHour
:
1
,
testMinute
:
0
,
```
vue
<
script
>
export
default
{
components
:
{},
data
()
{
return
{
testHour
:
1
,
testMinute
:
0
,
testSecond
:
0
,
start
:
false
,
timeupSecond
:
10
}
},
mounted
()
{
timeupSecond
:
10
}
},
mounted
()
{
setTimeout
(()
=>
{
this
.
testHour
=
1
this
.
testMinute
=
1
this
.
testHour
=
1
this
.
testMinute
=
1
this
.
testSecond
=
0
this
.
start
=
true
this
.
start
=
true
},
3000
)
setTimeout
(()
=>
{
this
.
start
=
false
},
10000
)
},
methods
:
{
timeup
()
{
uni
.
showToast
({
title
:
'
时间到
'
},
10000
)
},
methods
:
{
timeup
()
{
uni
.
showToast
({
title
:
'
时间到
'
})
this
.
timeupSecond
=
29
}
}
}
</
script
>
this
.
timeupSecond
=
29
}
}
}
</
script
>
```
:::
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录