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

CountDown \u5012\u8BA1\u65F6

\u4ECB\u7ECD

\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { CountDown } from '@nutui/nutui';
// taro
import { CountDown } from '@nutui/nutui-taro';

const app = createApp();
app.use(CountDown);

\u57FA\u7840\u7528\u6CD5

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

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

\u663E\u793A\u5929

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

\u4EE5\u670D\u52A1\u7AEF\u7684\u65F6\u95F4\u4E3A\u51C6

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

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

\u663E\u793A\u4E3A \u5929\u65F6\u5206\u79D2

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

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

\u5F02\u6B65\u66F4\u65B0\u7ED3\u675F\u65F6\u95F4

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

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

\u63A7\u5236\u5F00\u59CB\u548C\u6682\u505C\u7684\u5012\u8BA1\u65F6

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

setup() {
  const state = reactive({
      paused: false,
      end: Date.now() + 50 * 1000,
    });

    const toggle = ()=> {
      state.paused = !state.paused;
    }
    const onpaused = (v)=> {
      console.log('paused: ', v);
    }
    const onrestart = (v)=> {
      console.log('restart: ', v);
    }
  return {
      toggle,
      onpaused,
      onrestart,
    ...toRefs(state)
  };
}

\u81EA\u5B9A\u4E49\u5C55\u793A

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

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

API

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u5F53\u524D\u65F6\u95F4\uFF0C\u81EA\u5B9A\u4E49\u5C55\u793A\u5185\u5BB9\u65F6\u751F\u6548	Object	{}
start-time	\u5F00\u59CB\u65F6\u95F4	String, Number	Date.now()
end-time	\u7ED3\u675F\u65F6\u95F4	String, Number	Date.now()
show-days	\u662F\u5426\u663E\u793A\u5929	Boolean	false
show-plain-text	\u663E\u793A\u4E3A\u7EAF\u6587\u672C	Boolean	false
paused	\u662F\u5426\u6682\u505C	Boolean	false

Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
on-end	\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6	\u5269\u4F59\u65F6\u95F4\u6233
on-paused	\u6682\u505C\u65F6	\u5269\u4F59\u65F6\u95F4\u6233
on-restart	\u6682\u505C\u65F6	\u5269\u4F59\u65F6\u95F4\u6233

`,30),e=[p],d={setup(c,{expose:s}){return s({frontmatter:{}}),(r,o)=>(n(),a("div",l,e))}};export{d as default};