Cách tạo duration progress bar với PrimeVue ProgressBar

Tôi từng rất đau đầu khi muốn tạo 1 progress bar từ component ProgressBar của PrimeVue mà có thể chạy từ 0% đến 100% trong 1 khoảng thời gian chỉ định. Tuy nhiên khi đọc doc của PrimeVue về component này thì tôi không thấy bất cứ tuỳ chọn nào cho phép tôi làm điều này. Vậy nên chỗ này cần phải tricky một chút.

Đầu tiên chúng hãy xem document về component này: PrimeVue ProgressBar

Chúng ta thấy rằng cần truyền vào 1 prop tên là :value là 1 số từ 0 đến 100 thể hiện giá trị phần trăm của progress bar.

Tiếp theo hãy đọc đến đoạn doc Dynamnic

Ta thấy mỗi khi giá trị của progress bar thay đổi, cần 1 khoảng thời gian để giá trị cũ trượt đến giá trị mới. Vậy khoảng thời gian đó là bao nhiêu. Cùng tôi inspect element này lên:

Để ý rằng ở đây có thuộc tính transition: width 1s ease-in-out;. Nghĩa là cần 1 giây để progress bar thay đổi giá trị. Nghĩa là khi chúng ta thay đổi giá trị từ 0% thành 100% thì progress bar này cần 1 giây để chạy. Vậy thì 1 giây chính là duration mặc định của component này. Vậy thì chúng ta chỉ cần thay đổi thuộc tính css transition-duration của element progress-bar-value bên trong component progress bar. Hãy sử dụng tính năng passthrough của PrimeVue để làm việc này:

<template>
  <ProgressBar :value="value" :pt:value:style="{ 'transition-duration': '3s' }" />
</template>

Sau đó hãy thay đổi value để xem kết quả.

Kết quả cuối cùng:

// ~/components/app/progress-bar.vue
<template>
  <p-progress-bar
    v-bind="props"
    :pt:value:style="{ 'transition-duration': props.duration }"
  />
</template>

<script setup lang="ts">
import type { ProgressBarProps } from 'primevue';

// define prop type to get suggestion in VSCode
interface AppProgressBarProps extends /* @vue-ignore */ ProgressBarProps {
  duration?: string;
}

const props = withDefaults(defineProps<AppProgressBarProps>(), {
  duration: '3s',
});
</script>

StackBlitz: https://stackblitz.com/edit/nuxt-starter-cdnmfmvv?file=components%2Fapp%2Fprogress-bar.vue