很開心,已經堅持第27天...
Experience is the mother of wisdom.
經驗為智慧之母。/ 不經一事,不長一智。
PrimeVue 提供了一個簡單易用的 元件,該元件可以用來顯示操作的進度。
今天直接進入正題...
直接到官網看範例,
這是進度的範例。每隔兩秒隨機增加,進度達到 100% 時會有完成通知。
下面為進度條更新邏輯~
組件使用生命週期
<script setup>
....
// 在組件掛載時啟動進度條更新
onMounted(() => {
startProgress();
});
// 在組件卸載前停止進度條更新
onBeforeUnmount(() => {
endProgress();
});
...
</script>
* onMounted:
當組件掛載到 DOM 時,調用 startProgress() 函數,開始更新進度條。
* onBeforeUnmount :
當組件從 DOM 中移除之前,調用 endProgress() 函數,清除計時器防止內存洩漏。
啟動進度更新
const startProgress = () => {
interval.value = setInterval(() => {
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
}
value1.value = newValue;
}, 2000);
};
停止進度更新
const endProgress = () => {
clearInterval(interval.value); // 清除計時器
interval.value = null; // 重置計時器變量
};
以上功能, 適合用到上傳文件、等待等功能。
快到尾聲了~繼續加油!明天見~