Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen undur

Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan fungsi kira detik, seperti aktiviti jualan kilat, diskaun masa terhad, dsb. Dalam Vue.js 3.0, disebabkan kemunculan API Komposisi, kami boleh merangkum komponen boleh guna semula dengan lebih mudah. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen kira detik yang boleh diguna semula.

1. Buat komponen undur

Mula-mula, buat komponen CountDown.vue dalam direktori src/components/:

<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>

Komponen ini menerima prop bernama endTime, Indicates masa tamat kira detik. Dalam komponen, kami menggunakan API Komposisi dalam Vue.js 3.0 untuk mengira kira detik dan menghidupkan dan mematikan kira detik semasa kitaran hayat yang dipasang dan dinyahlekap. Antaranya, fungsi calcCountDownTime bertanggungjawab untuk mengira undur, fungsi formatTime bertanggungjawab untuk memformat masa, dan intervalId digunakan untuk menandakan pemasa.

2. Merangkumkan pemalam

Seterusnya, kami merangkum komponen hitung detik ke dalam pemalam Vue.js. Cipta fail countdown.js dalam direktori src/plugins/:

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

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

export default CountdownPlugin;

Dalam pemalam, kami menggunakan kaedah app.component untuk mendaftarkan komponen Countdown sebagai komponen global. Dengan cara ini, komponen undur boleh digunakan secara langsung dalam komponen lain.

3. Gunakan pemalam

Sekarang, kita boleh menggunakan pemalam kira detik terkapsul dalam senario perniagaan tertentu. Dalam komponen, kita perlu menggunakan pemalam Vue.js dahulu untuk mendaftarkan komponen undur, dan kemudian kita boleh menggunakan komponen Countdown dalam templat. Contohnya, dalam komponen 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>

Dalam contoh ini, kami menggunakan pemalam CountdownPlugin dalam fungsi cangkuk yang dipasang untuk mendaftarkan komponen Countdown, dan kemudian gunakan komponen Countdown dalam templat dan lulus ia satu nilai yang dipanggil endTime prop, menunjukkan masa tamat kira detik.

Pada ketika ini, kami telah berjaya merangkum komponen undur dan merangkumnya ke dalam pemalam Vue.js, menjadikannya lebih mudah dan boleh digunakan semula. Dalam projek sebenar, kita boleh menyesuaikan komponen ini mengikut keperluan perniagaan sebenar untuk menjadikannya lebih selaras dengan keperluan sebenar.

Atas ialah kandungan terperinci Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen undur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!