# countDown **Repository Path**: xiaojin1233323/count-down ## Basic Information - **Project Name**: countDown - **Description**: 呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃 - **Primary Language**: Unknown - **License**: Zlib - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-06-19 - **Last Updated**: 2022-08-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README Evernote Export

倒计时组件
1.引入

使用element标签引入
<element  name="CountDown" src="../../component/CountDown/CountDown.hml"></element>

2.基础用法
m-time 属性表示倒计时总时长，单位为秒。
<countdown m-time="{{ num }}"></countdown>
export default {    
data: {  num:30 }
}
3.属性

名称类型默认值必填描述
mTimeNumber3600000否倒计时总时长，单位为秒
autoPlayBooleantrue否是否自动开始倒计时
formatStringcolon否表示选用哪种格式：1. colon: "00:30:00" 2. day:"00天00小时30分钟00秒 3. diy:自定义格式
speedNumber1000否倒计时速度

4.事件

名称描述
transmission在自定义中 可通过改事件接收时间数据
finishEvent倒计时结束后触发

5.自定义用法

    <countdown @transmission="fomateTime" @finish-event="fomateTime"           m-time="{{ num }}"           auto-play="{{ true }}"           speed="100" format="diy">                <text  style="font-size: 15px;                        text-align: center;" >                        {{timeDate.hour}}                </text>        <text  style="font-size: 15px;                background-color: mediumvioletred;                text-align: center;" >                {{timeDate.minute}}        </text>        <text  style="font-size: 15px;                text-align: center;" >                {{timeDate.second}}        </text></countdown>

fomateTime(e){    this.timeDate=e.detail;    console.log(JSON.stringify(e));}
%E5%80%92%E8%AE%A1%E6%97%B6%E7%BB%84%E4%BB%B6%0A1.%E5%BC%95%E5%85%A5%0A%0A%E4%BD%BF%E7%94%A8element%E6%A0%87%E7%AD%BE%E5%BC%95%E5%85%A5%0A%3Celement%C2%A0%20name%3D%22CountDown%22%20src%3D%22..%2F..%2Fcomponent%2FCountDown%2FCountDown.hml%22%3E%3C%2Felement%3E%0A%0A2.%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95%0Am-time%C2%A0%E5%B1%9E%E6%80%A7%E8%A1%A8%E7%A4%BA%E5%80%92%E8%AE%A1%E6%97%B6%E6%80%BB%E6%97%B6%E9%95%BF%EF%BC%8C%E5%8D%95%E4%BD%8D%E4%B8%BA%E7%A7%92%E3%80%82%0A%3Ccountdown%20m-time%3D%22%7B%7B%20num%20%7D%7D%22%3E%3C%2Fcountdown%3E%0Aexport%20default%20%7B%C2%A0%C2%A0%C2%A0%C2%A0%0A%20%20%20%20%20%20%20data%3A%20%7B%C2%A0%20num%3A30%20%7D%0A%20%20%20%20%20%20%20%7D%0A3.%E5%B1%9E%E6%80%A7%0A%0A%7C%20%E5%90%8D%E7%A7%B0%20%7C%E7%B1%BB%E5%9E%8B%20%20%7C%E9%BB%98%E8%AE%A4%E5%80%BC%20%20%7C%20%E5%BF%85%E5%A1%AB%20%7C%E6%8F%8F%E8%BF%B0%20%20%7C%0A%7C%20---%20%7C%20---%20%7C%20---%20%7C%20---%20%7C%20---%20%7C%0A%7C%20mTime%20%7C%20Number%20%7C%203600000%20%7C%20%E5%90%A6%20%7C%20%E5%80%92%E8%AE%A1%E6%97%B6%E6%80%BB%E6%97%B6%E9%95%BF%EF%BC%8C%E5%8D%95%E4%BD%8D%E4%B8%BA%E7%A7%92%20%7C%0A%7CautoPlay%20%20%7C%20Boolean%20%7Ctrue%20%20%7C%E5%90%A6%20%7C%20%E6%98%AF%E5%90%A6%E8%87%AA%E5%8A%A8%E5%BC%80%E5%A7%8B%E5%80%92%E8%AE%A1%E6%97%B6%20%7C%0A%7C%20format%20%7C%20String%20%7C%20colon%20%7C%20%E5%90%A6%20%7C%20%E8%A1%A8%E7%A4%BA%E9%80%89%E7%94%A8%E5%93%AA%E7%A7%8D%E6%A0%BC%E5%BC%8F%EF%BC%9A1.%20colon%3A%20%2200%3A30%3A00%22%202.%20day%3A%2200%E5%A4%A900%E5%B0%8F%E6%97%B630%E5%88%86%E9%92%9F00%E7%A7%92%20%203.%20diy%3A%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%BC%E5%BC%8F%7C%0A%7C%20speed%20%7CNumber%20%20%7C1000%20%20%7C%20%E5%90%A6%20%7C%20%E5%80%92%E8%AE%A1%E6%97%B6%E9%80%9F%E5%BA%A6%20%7C%0A%0A4.%E4%BA%8B%E4%BB%B6%0A%0A%0A%7C%20%E5%90%8D%E7%A7%B0%20%7C%20%E6%8F%8F%E8%BF%B0%20%7C%0A%7C%20---%20%7C%20---%20%7C%0A%7C%20transmission%20%7C%20%E5%9C%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%AD%20%E5%8F%AF%E9%80%9A%E8%BF%87%E6%94%B9%E4%BA%8B%E4%BB%B6%E6%8E%A5%E6%94%B6%E6%97%B6%E9%97%B4%E6%95%B0%E6%8D%AE%20%7C%0A%7C%20finishEvent%7C%20%E5%80%92%E8%AE%A1%E6%97%B6%E7%BB%93%E6%9D%9F%E5%90%8E%E8%A7%A6%E5%8F%91%20%7C%0A%0A%0A5.%E8%87%AA%E5%AE%9A%E4%B9%89%E7%94%A8%E6%B3%95%0A%60%60%60js%0A%20%20%20%20%3Ccountdown%20%40transmission%3D%22fomateTime%22%20%40finish-event%3D%22fomateTime%22%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20class%3D%22a1%22%20id%3D'a1'%20m-time%3D%22%7B%7B%20num%20%7D%7D%22%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20auto-play%3D%22%7B%7B%20true%20%7D%7D%22%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20speed%3D%22100%22%20format%3D%22diy%22%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3Ctext%C2%A0%20style%3D%22font-size%3A%2015px%3Bwidth%3A%20200px%3Bheight%3A%2030px%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20text-align%3A%20center%3B%22%20%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7B%7BtimeDate.hour%7D%7D%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3C%2Ftext%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3Ctext%C2%A0%20style%3D%22font-size%3A%2015px%3Bwidth%3A%20200px%3Bheight%3A%2030px%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20background-color%3A%20mediumvioletred%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20text-align%3A%20center%3B%22%20%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7B%7BtimeDate.minute%7D%7D%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3C%2Ftext%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3Ctext%C2%A0%20style%3D%22font-size%3A%2015px%3Bwidth%3A%20200px%3Bheight%3A%2030px%3B%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20text-align%3A%20center%3B%22%20%3E%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%7B%7BtimeDate.second%7D%7D%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%20%3C%2Ftext%3E%3C%2Fcountdown%3E%0A%0AfomateTime(e)%7B%C2%A0%C2%A0%C2%A0%20this.timeDate%3De.detail%3B%C2%A0%C2%A0%C2%A0%20console.log(JSON.stringify(e))%3B%7D%0A%0A%0A%60%60%60%0A%0A%20%0A%0A%0A%0A%0A%0A%0A