VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 카운트다운 구성 요소를 캡슐화합니다.

프론트엔드 개발에서는 반짝 세일 활동, 기간 한정 할인 등 카운트다운 기능을 사용해야 하는 경우가 많습니다. Vue.js 3.0에서는 Composition API의 등장으로 재사용 가능한 구성 요소를 더 쉽게 캡슐화할 수 있습니다. 이 기사에서는 Vue.js 플러그인을 사용하여 재사용 가능한 카운트다운 구성 요소를 캡슐화하는 방법을 소개합니다.

1. 카운트다운 구성 요소 만들기

먼저 src/comComponents/ 디렉터리에 CountDown.vue 구성 요소를 만듭니다.

<template>
  <div class="countdown">
    <span>{{ formatCountDownTime }}</span>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'CountDown',
  props: {
    endTime: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const countDownTime = ref('00:00:00');

    // 计算倒计时时间
    const calcCountDownTime = () => {
      const diff = Date.parse(props.endTime) - Date.parse(new Date());
      const seconds = Math.floor(diff / 1000);
      if (seconds <= 0) {
        countDownTime.value = '00:00:00';
        clearInterval(intervalId);
      } else {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds - hours * 3600) / 60);
        const leftSeconds = seconds - hours * 3600 - minutes * 60;
        countDownTime.value = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(leftSeconds)}`;
      }
    };
    
    // 格式化时间
    const formatTime = (time) => {
      return time < 10 ? `0${time}` : time;
    }

    let intervalId;

    onMounted(() => {
      calcCountDownTime();
      intervalId = setInterval(() => {
        calcCountDownTime();
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      countDownTime,
      formatCountDownTime: ref('00:00:00')
    };
  }
};
</script>

<style>
.countdown {
  font-size: 18px;
  font-weight: bold;
}
</style>

이 구성 요소는 카운트다운 종료 시간을 나타내는 endTime이라는 속성을 허용합니다. 구성 요소에서는 Vue.js 3.0의 Composition API를 사용하여 카운트다운을 계산하고 마운트 및 마운트 해제된 수명 주기 동안 카운트다운을 켜고 끕니다. 그 중 calcCountDownTime 함수는 카운트다운 계산을 담당하고, formatTime 함수는 시간 형식을 담당하며, IntervalId는 타이머 표시에 사용됩니다.

2. 플러그인 캡슐화

다음으로 카운트다운 구성요소를 Vue.js 플러그인으로 캡슐화합니다. src/plugins/ 디렉터리에 countdown.js 파일을 만듭니다.

import CountDown from '@/components/CountDown.vue';

const CountdownPlugin = {
  install(app) {
    app.component(CountDown.name, CountDown);
  }
};

export default CountdownPlugin;

플러그인에서는 app.comComponent 메서드를 사용하여 CountDown 구성 요소를 전역 구성 요소로 등록합니다. 이러한 방식으로 카운트다운 구성 요소를 다른 구성 요소에서 직접 사용할 수 있습니다.

3. 플러그인 사용

이제 특정 비즈니스 시나리오에서 캡슐화된 카운트다운 플러그인을 사용할 수 있습니다. 구성 요소에서는 먼저 Vue.js 플러그인을 사용하여 카운트다운 구성 요소를 등록한 다음 템플릿에서 CountDown 구성 요소를 사용할 수 있습니다. 예를 들어 Home.vue 구성 요소에서:

<template>
  <div class="home">
    <CountDown :endTime="endTime" />
  </div>
</template>

<script>
import { ref } from 'vue';
import CountdownPlugin from '@/plugins/countdown.js';

export default {
  name: 'Home',
  setup() {
    const endTime = ref('2021-10-30 00:00:00');

    return {
      endTime
    };
  },
  mounted() {
    Vue.use(CountdownPlugin);
  }
};
</script>

<style>

</style>

이 예에서는 마운트된 후크 함수에 CountdownPlugin 플러그인을 사용하여 CountDown 구성 요소를 등록한 다음 템플릿에서 CountDown 구성 요소를 사용하고 endTime이라는 속성을 전달합니다. 카운트다운 종료 시간을 나타냅니다.

이 시점에서 우리는 카운트다운 구성 요소를 성공적으로 캡슐화하고 이를 Vue.js 플러그인으로 캡슐화하여 더욱 편리하고 재사용 가능하게 만들었습니다. 실제 프로젝트에서는 실제 비즈니스 요구 사항에 따라 이 구성 요소를 사용자 정의하여 실제 요구 사항에 더 부합하도록 만들 수 있습니다.

위 내용은 VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 카운트다운 구성 요소를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!