最近在個(gè)人的項(xiàng)目中覆履，想對(duì)頁面之間跳轉(zhuǎn)的過程進(jìn)行優(yōu)化，想到了很多文檔或 npm 等都用到的頁面跳轉(zhuǎn)進(jìn)度條费薄，于是便想自己去實(shí)現(xiàn)一個(gè)硝全，特此記錄。
來看下 npm 搜索組件時(shí)候的效果：
so 下面咱們一起動(dòng)手實(shí)現(xiàn)一下唄楞抡。
定義使用方式
想實(shí)現(xiàn)一個(gè)組件的前提伟众，一定要想好你的需求是什么，還要自己去定義一個(gè)舒服的使用方法拌倍，這其中也是有原則的赂鲤，對(duì)使用者來說，使用方式越簡(jiǎn)單越好柱恤。那么對(duì)應(yīng)的代價(jià)就是寫這個(gè)組件的復(fù)雜度會(huì)變高数初。
我想要的使用方式是這樣的：可以在任意的地方去調(diào)用到這個(gè)方法，可以隨時(shí)控制其狀態(tài)梗顺。
看下對(duì)應(yīng)的代碼：
async someFunction () {
this.$progress.start()
try {
const ret = await axios.get('/xxx')
// some code ...
this.$progress.finish()
} catch (err) {
// cache err ...
this.$progress.fail()
}
}
當(dāng)然泡孩，想在任意地方使用，少不了一個(gè)步驟寺谤，就是在全局注冊(cè)這個(gè)組件：
import progressBar from 'xxx/progress-bar'
Vue.use(progressBar, { // some config ... })
如果不想全局注冊(cè)仑鸥，你也可以在某個(gè)組件內(nèi)單獨(dú)使用，只要你開心就好变屁。
實(shí)現(xiàn)過程
先來建立一個(gè)文件夾和其中兩個(gè)文件：
progress-bar
- 01 progress-bar.vue
- 02 index.js
打開progress-bar.vue眼俊，先來寫結(jié)構(gòu)和樣式，這里很簡(jiǎn)單：
<template>
<div :style='style'></div>
</template>
<style scoped>
.bar {
position: fixed;
z-index: 99999;
opacity: 1;
}
</style>
在注冊(cè)組件的時(shí)候粟关，我想可以自定義一些功能疮胖，比如
成功的顏色
失敗的顏色
進(jìn)度條的位置
動(dòng)畫過渡時(shí)間
加載方向
高度
是否可以自動(dòng)完成
當(dāng)然只要你想到的都可以添加，那么這些可以定制的屬性闷板，自然而然就成為了組件的 props：
export default {
name: 'progressBar',
props: {
options: {
type: Object,
default () {
return {
succColor: 'rgb(76, 164, 214)',
failColor: 'rgb(218, 26, 101)',
position: 'top',
transition: {
widthSpeed: 200,
opacitySpeed: 400,
duration: 300 // 定義消失時(shí)間 ms
},
inverse: false, // 進(jìn)度條的加載方向
thickness: 2 // 進(jìn)度條的高度
}
}
}
}
}
</script>
除了要定義的屬性以外澎灸，那么組件本身總要有一些自己的屬性，用來控制自己的狀態(tài)遮晚，比如這個(gè)組件性昭，你要控制進(jìn)度條的長(zhǎng)度、顯示和隱藏等狀態(tài)县遣。
添加 vue 的 data 屬性：
data () {
return {
percent: 0, // 進(jìn)度條長(zhǎng)度
show: false, // 顯示和隱藏
canSuccess: true // 是否是成功的狀態(tài)
}
}
有了這些屬性糜颠，這個(gè)進(jìn)度條就要根據(jù)這些屬性的變化來“自己動(dòng)”。所以這個(gè)時(shí)候首先想到的當(dāng)然就是 Vue 的計(jì)算屬性：
computed: {
style () {
// 先拿到亂七八糟的屬性
const { succColor, failColor, location, transition, inverse, thickness } = this.options
const { widthSpeed, opacitySpeed } = transition
const { canSuccess, preset, show } = this
// 定義 css 樣式
const style = {
backgroundColor: canSuccess ? succColor : failColor,
opacity: show ? 1 : 0
}
if (position !== 'top' || position !== 'bottom') {
throw new Error('The wrong config of position!')
}
style[position] = 0
if (inverse) {
style.left = 0
} else {
style.right = 0
}
style.width = preset + '%' // 設(shè)置進(jìn)度條長(zhǎng)度
style.height = thickness + 'px' // 設(shè)置顯示高度
style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms` // 設(shè)置過度樣式
return style
}
}
到這里這個(gè) vue 組件其實(shí)就完成了艺玲，接下來就是如何去控制它括蝠。打開index.js，先來寫一個(gè)標(biāo)準(zhǔn)的組件格式：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注冊(cè)組件
Vue.component(progressBar.name, progressBar)
}
}
之后咱們要用到 Vue 提供的擴(kuò)展方法饭聚，來完成咱們的需求忌警。
第一步，添加 autoFinish 屬性秒梳，用來設(shè)定動(dòng)畫是否可以自動(dòng)完成法绵，默認(rèn)是 true，當(dāng)然如果某個(gè)路由或請(qǐng)求一直處于 pending 狀態(tài)酪碘，你可以可以設(shè)置讓其永遠(yuǎn)不完成動(dòng)畫的動(dòng)作朋譬。
第二步，來寫一個(gè)對(duì)象兴垦，其中包含 start 徙赢、 finish 字柠、 fail 方法以及動(dòng)畫代碼。
第三步狡赐，將這個(gè)對(duì)象掛在到 Vue 的原型
完整的代碼和說明如下：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注冊(cè)組件
Vue.component(progressBar.name, progressBar)
// 創(chuàng)建一個(gè) Vue 子類
const Component = Vue.extend(progressBar)
// 拿到自定義的屬性
const { autoFinish, ...res } = options
// 創(chuàng)建組件實(shí)例
const vm = new Component({
data: {
autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true
}
})
// 將 progressBar 的默認(rèn) options 與 自定義的 options 合并
options = Object.assign(vm.$props.options, { ...res })
//合并新的 props
vm.$propsData = options
vm.$mount()
// 如果是服務(wù)端渲染那么不繼續(xù)執(zhí)行
if (!vm.$isServer) {
document.body.appendChild(vm.$el)
}
let timer = null
const progress = {
start () {
if (Vue.$isServer) return
// 每次調(diào)用 start 都重新初始化一次窑业，比如多次點(diǎn)擊某個(gè)按鈕連續(xù)請(qǐng)求，那么每次都從0開始
vm.percent = 0
vm.show = true
vm.canSuccess = true
// 定一個(gè)增量枕屉，這個(gè)值可以改成參數(shù)常柄，也可以按照使用經(jīng)驗(yàn)來設(shè)定
const CUT_SCALE = 5
// 定義每 100 秒來執(zhí)行一次動(dòng)畫
timer = setInterval(() => {
// 每次執(zhí)行增量動(dòng)畫
this.increase((CUT_SCALE - 1) * Math.random() + 1)
// 如果進(jìn)度大于 95%，并且設(shè)置了自動(dòng)完成搀擂，那么執(zhí)行結(jié)束動(dòng)作
if (vm.percent > 95 && vm.autoFinish) {
this.finish()
}
}, 100)
},
increase (cut) {
vm.percent = Math.min(99, vm.percent + cut)
},
hide () {
clearInterval(timer)
// 這里面有2個(gè)定時(shí)器西潘，外層定時(shí)器是讓用戶可以看到這個(gè) 進(jìn)度已經(jīng)完成啦
// 內(nèi)層定時(shí)器，由于 opacity 消失需要一定的過渡時(shí)間哨颂，所以要等待它消失以后
// 在將其進(jìn)度設(shè)置為0喷市，等待下次調(diào)用隐绵，如果不延遲患亿，那么會(huì)看到進(jìn)度到100后又回到0的動(dòng)畫
setTimeout(() => {
vm.show = false
setTimeout(() => {
vm.percent = 0
timer = null
}, vm.options.transition.opacitySpeed)
}, vm.options.transition.duration)
},
// 下面這2個(gè)方法就很簡(jiǎn)單了，只需要完成進(jìn)度本缠，然后執(zhí)行隱藏即可
finish () {
if (Vue.$isServer) return
vm.percent = 100
this.hide()
},
fail () {
if (Vue.$isServer) return
// 修改未成功的狀態(tài)沃测，實(shí)際效果就是改變最后的顏色
vm.canSuccess = false
vm.percent = 100
this.hide()
}
}
// 最后掛在到全局
Vue.prototype.$progress = progress
}
}
到這里缭黔，一個(gè)進(jìn)度條組件就完成了。大家可以自己動(dòng)手實(shí)踐一下蒂破，起一個(gè)項(xiàng)目馏谨，使用 vue-router 的 beforeResolve 聲明周期鉤子，或者寫一個(gè)定時(shí)器模擬異步來測(cè)試一下附迷。
以上是筆者歸納總結(jié)惧互，如有誤之處，歡迎指出喇伯。
往期文章推薦：
覺得本文對(duì)你有幫助艾猜？請(qǐng)分享給更多人
關(guān)注【妙味前端】加星標(biāo)，關(guān)注更多內(nèi)容
訂閱號(hào)ID：Miaovclass
關(guān)注妙味訂閱號(hào)：“妙味前端”捻悯，為您帶來優(yōu)質(zhì)前端技術(shù)干貨匆赃；
