import{e as s,o as a,G as n}from"./vendor.f7062dc0.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, NumberDate.now()
end-time结束时间String, NumberDate.now()
show-days是否显示天Booleanfalse
show-plain-text显示为纯文本Booleanfalse
paused是否暂停Booleanfalse

Event

字段说明回调参数
on-end倒计时结束时剩余时间戳
on-paused暂停时剩余时间戳
on-restart暂停时剩余时间戳
',29)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};