我們在src跟目錄下創(chuàng)建一個utils目錄下面創(chuàng)建一個continuousLoading.js
參考代碼如下
let value = 0;
export default function(callback) {
const timer = setInterval(() => {
if (callback&&(value || value === 0)&&value < 99) {
value += 1;
callback(value);
} else {
clearInterval(timer);
}
}, 500);
}
這里這個描述甚至你也可以改成外面?zhèn)鬟M來的 我這里就直接設置 500 0.5秒執(zhí)行一次了
然后每次進來判斷 value 如果還小于99就繼續(xù) 加一 然后回調(diào)一下傳進來的函數(shù)
如果到99了 就直接clearInterval關掉定時器
然后 我們vue組件代碼編寫如下
<template>
<div>
{{ value }}
</div>
</template>
<script>
import continuousLoading from '@/utils/continuousLoading';
export default {
data() {
return {
value: 0
}
},
created() {
continuousLoading((value) => {
this.value = value;
});
}
}
</script>
這里 主要是created中 定義了continuousLoading 我們傳進去的回調(diào)就是 接受到value 然后將接到的value給 data中的響應式的value賦值
因為我們continuousLoading中寫了每500后加一回調(diào) 傳value作為回調(diào)函數(shù)的參數(shù)
這樣 我們頁面上的值就一直在加 且用于 不會超過99
做出一個正在加載的假象給用戶看
甚至我們還可以配合element-ui的組件
參考代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-459275.html
<template>
<div>
<el-progress type="circle" :percentage="value"></el-progress>
</div>
</template>
<script>
import continuousLoading from '@/utils/continuousLoading';
export default {
data() {
return {
value: 0
}
},
created() {
continuousLoading((value) => {
this.value = value;
});
}
}
</script>
就很完美文章來源地址http://www.zghlxwxcb.cn/news/detail-459275.html
到了這里，關于vue做一個一直自增加載且永遠不會超過百分之九十九的數(shù)值 制造正在加載假象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
