import{e as s,o as a,G as n}from"./vendor.ab88405c.js";const t={class:"markdown-body"},l=[n('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

安装

import { createApp } from 'vue';\n// vue\nimport { CountDown } from '@nutui/nutui';\n// taro\nimport { CountDown } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(CountDown);\n

基础用法

<nut-countdown :end-time="end" ></nut-countdown>\n

setup() {\n  const state = reactive({\n      end: Date.now() + 50 * 1000,\n    });\n  return {\n    ...toRefs(state)\n  };\n}\n

显示天

<nut-countdown :end-time="end" show-days ></nut-countdown>\n

以服务端的时间为准

<nut-countdown  :start-time="serverTime" :end-time="end" show-days ></nut-countdown>\n

setup() {\n  const state = reactive({\n      serverTime: Date.now() - 30 * 1000,\n      end: Date.now() + 50 * 1000,\n    });\n  return {\n    ...toRefs(state)\n  };\n}\n

显示为天时分秒

<nut-countdown show-days show-plain-text  :end-time="end"></nut-countdown>\n

setup() {\n  const state = reactive({\n      end: Date.now() + 50 * 1000,\n    });\n  return {\n    ...toRefs(state)\n  };\n}\n

异步更新结束时间

<nut-countdown  show-days show-plain-text  :end-time="asyncEnd" ></nut-countdown>\n

setup() {\n  const state = reactive({\n      asyncEnd: 0,\n    });\n  return {\n    ...toRefs(state)\n  };\n}\n

控制开始和暂停的倒计时

<nut-cell>\n    <nut-countdown  :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />\n    <div style="position:absolute;right:10px;top:9px">\n        <nut-button type="primary" size='small' @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>\n    </div>\n</nut-cell>\n

setup() {\n  const state = reactive({\n      paused: false,\n      end: Date.now() + 50 * 1000,\n    });\n\n    const toggle = ()=> {\n      state.paused = !state.paused;\n    }\n    const onpaused = (v)=> {\n      console.log('paused: ', v);\n    }\n    const onrestart = (v)=> {\n      console.log('restart: ', v);\n    }\n  return {\n      toggle,\n      onpaused,\n      onrestart,\n    ...toRefs(state)\n  };\n}\n

自定义展示

<nut-countdown v-model="resetTime" :endTime="end">\n    <div class="countdown-part-box">\n        <div class="part-item-symbol"> resetTime.d 天</div>\n        <div class="part-item h"> resetTime.h </div>\n        <span class="part-item-symbol">:</span>\n        <div class="part-item m"> resetTime.m </div>\n        <span class="part-item-symbol">:</span>\n        <div class="part-item s"> resetTime.s </div>\n    </div>\n</nut-countdown>\n

setup() {\n  const state = reactive({\n      end: Date.now() + 50 * 1000,\n      resetTime: {\n        d: '1',\n        h: '00',\n        m: '00',\n        s: '00'\n      }\n    });\n  return {\n    ...toRefs(state)\n  };\n}\n

API

Props

字段	说明	类型	默认值
v-model	当前时间，自定义展示内容时生效	Object	{}
start-time	开始时间	String, Number	Date.now()
end-time	结束时间	String, Number	Date.now()
show-days	是否显示天	Boolean	false
show-plain-text	显示为纯文本	Boolean	false
paused	是否暂停	Boolean	false

Event

字段	说明	回调参数
on-end	倒计时结束时	剩余时间戳
on-paused	暂停时	剩余时间戳
on-restart	暂停时	剩余时间戳

',30)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};