Countdown 카운트다운

남은 시간을 세어 보여 주는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요?

카운트다운이 필요할 때 사용해요.

기본 사용법

기본(시:분:초): :::demo

<template>
  <div>
  <d-countdown :value="deadline" @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const deadline = ref(Date.now() + 100 * 1000);
    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      deadline,
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

시간 포맷

시:분:초:밀리초: :::demo

<template>
  <div>
  <d-countdown :value="deadline" format='HH:mm:ss:SSS' @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const deadline = ref(Date.now() + 2 * 60 * 60 * 1000);
    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      deadline,
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

년:월:일:시:분:초: :::demo

<template>
  <div>
  <d-countdown :value="deadline" format="YYYY 年 MM 月 DD 天 HH 时 mm 分 ss 秒" @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const deadline = ref(new Date().getTime() + 369 * 24 * 60 * 60 * 1000 + 5000);

    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      deadline,
      msg: 'Countdown 倒计时 组件文档示例',
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

참고: format에서 특정 항목의 시간이 없으면, 없는 항목의 값이 다음 항목으로 누적돼요. 예를 들어 M(월)이 없으면 월 값 *30이 일에 누적돼요. format으로 포맷된 값은 onchange로 전달되는 legalTime 값으로 반환돼요. 아래와 같아요: :::demo

<template>
  <div>
  <d-countdown :value="deadline" format='YYYY年DD天 HH时mm分ss秒' @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const deadline = ref(new Date().getTime() + 700 * 24 * 60 * 60 *1000 + 5000);
    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      deadline,
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

접두사와 접미사

:::demo

<template>
  <div>
  <d-countdown :value="Date.now() + 50000" format="HH时mm分ss秒" prefix="还有 " suffix=" 结束！" @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

style 설정

카운트다운 글자 스타일을 설정해요: :::demo

<template>
  <div>
  <d-countdown :value="deadline" :valueStyle="styles" @onChange="changeTime" @onFinish="finishTime"/>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const deadline = ref(new Date().getTime() + 10 * 24 * 60 * 60 *1000);
    const styles = {color: '#5e7ce0'}
    const changeTime = (n) => {
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      deadline,
      styles,
      changeTime,
      finishTime
    }
  }
})
</script>

<style>

</style>

:::

커스텀 콘텐츠

:::demo

<template>
  <div>
    <d-countdown :format="format" :value="deadline" @onChange="changeTime" @onFinish="finishTime">
      <div class="countdown-main">
        距离活动结束还有
        <span class="time-num">{{ leftTime.H }}</span>
        时
        <span class="time-num">{{ leftTime.m }}</span>
        分
        <span class="time-num">{{ leftTime.s }}</span>
        秒
      </div>
    </d-countdown>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  setup() {
    const format = ref("HH:mm:ss");
    const deadline = ref(new Date().getTime() + 10 * 24 * 60 * 60 *1000 + 5000);
    const leftTime = reactive({'H':0,'m':0,'s':0})
    const changeTime = ({legalTime}) => {
      
      for (const k of legalTime.keys()) {
        if (k in leftTime) {
          leftTime[k] = legalTime.get(k);
        }
      }
    }
    const finishTime = () => {
    }
    return {
      msg: 'Countdown 倒计时 组件文档示例',
      deadline,
      leftTime,
      changeTime,
      finishTime,
      format
    }
  }
})
</script>

<style lang="scss">
.countdown-main .time-num{
    font-weight: 400;
    display: inline-block;
    border: 1px solid #f4f4f4;
    padding: 0 4px;
    border-radius: 4px;
    min-width: 48px;
    text-align: center;
    background-color: #f4f4f4;
    font-size: 18px;
  }
</style>

:::

Countdown 파라미터

Countdown 이벤트

Countdown 슬롯

더 알아보기 (Learn more)

Countdown으로 남은 시간을 다양한 포맷으로 표시할 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.