這篇文章帶給大家的內容是關於 Vue進度條元件的實作教學（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
最近在個人的專案中，想對頁面之間跳轉的過程進行優化，想到了很多文檔或npm 等都用到的頁面跳轉進度條，於是便想自己去實現一個，特此記錄。
來看下 npm 搜尋元件時候的效果：
#so 下面咱們一起動手實作一下唄。
定義使用方式
想實作一個元件的前提，一定要想好你的需求是什麼，還要自己去定義一個舒服的使用方法，這其中也是有原則的，對使用者來說，使用方式越簡單越好。那麼對應的代價就是寫這個組件的複雜度會變高。
我想要的使用方式是這樣的：可以在任意的地方去呼叫到這個方法，可以隨時控制其狀態。
看下對應的程式碼：
async someFunction () {
this.$progress.start()
try {
const ret = await axios.get('/xxx')
// some code ...
this.$progress.finish()
} catch (err) {
// cache err ...
this.$progress.fail()
}
}當然，想在任意地方使用，少不了一個步驟，就是在全域註冊這個元件：
import progressBar from 'xxx/progress-bar'
Vue.use(progressBar, { // some config ... })如果不想全域註冊，你也可以在某個元件內單獨使用，只要你開心就好。
實作過程
先來建立一個資料夾和其中兩個檔案：
progress-bar - 01 progress-bar.vue - 02 index.js
開啟progress-bar.vue，先來寫結構和樣式，這裡很簡單：
<template>
<p></p>
</template>
<style>
.bar {
position: fixed;
z-index: 99999;
opacity: 1;
}
</style>在註冊元件的時候，我想可以自訂一些功能，例如
成功的顏色
失敗的顏色
#進度條的位置
當然只要你想到的都可以添加，那麼這些可以自訂的屬性，自然而然就成為了元件的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 // 定义消失时间 ms
},
inverse: false, // 进度条的加载方向
thickness: 2 // 进度条的高度
}
}
}
}
}
新增 vue 的 data 屬性：
data () {
return {
percent: 0, // 进度条长度
show: false, // 显示和隐藏
canSuccess: true // 是否是成功的状态
}
}有了這些屬性，這個進度條就要根據這些屬性的變化來「自己動」。所以這個時候首先想到的當然就是 Vue 的計算屬性：
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 + '%' // 设置进度条长度
style.height = thickness + 'px' // 设置显示高度
style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms` // 设置过度样式
return style
}
}到這裡這個 vue 元件其實就完成了，接下來就是如何去控制它。開啟index.js，先來寫一個標準的元件格式：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注册组件
Vue.component(progressBar.name, progressBar)
}
}之後咱們要用到 Vue 提供的擴充方法，來完成咱們的需求。
第一步，加入autoFinish 屬性，用來設定動畫是否可以自動完成，預設是true，當然如果某個路由或請求一直處於pending 狀態，你可以可以設定讓永遠不完成動畫的動作。 第二步，來寫一個對象，其中包含 start 、 finish 、 fail 方法以及動畫程式碼。 第三步，將這個物件掛在到Vue 的原型完整的程式碼和說明如下：
import progressBar from './progress-bar.vue'
export default {
install (Vue, options = {}) {
// 注册组件
Vue.component(progressBar.name, progressBar)
// 创建一个 Vue 子类
const Component = Vue.extend(progressBar)
// 拿到自定义的属性
const { autoFinish, ...res } = options
// 创建组件实例
const vm = new Component({
data: {
autoFinish: typeof autoFinish === 'boolean' ? autoFinish : true
}
})
// 将 progressBar 的默认 options 与 自定义的 options 合并
options = Object.assign(vm.$props.options, { ...res })
//合并新的 props
vm.$propsData = options
vm.$mount()
// 如果是服务端渲染那么不继续执行
if (!vm.$isServer) {
document.body.appendChild(vm.$el)
}
let timer = null
const progress = {
start () {
if (Vue.$isServer) return
// 每次调用 start 都重新初始化一次，比如多次点击某个按钮连续请求，那么每次都从0开始
vm.percent = 0
vm.show = true
vm.canSuccess = true
// 定一个增量，这个值可以改成参数，也可以按照使用经验来设定
const CUT_SCALE = 5
// 定义每 100 秒来执行一次动画
timer = setInterval(() => {
// 每次执行增量动画
this.increase((CUT_SCALE - 1) * Math.random() + 1)
// 如果进度大于 95%，并且设置了自动完成，那么执行结束动作
if (vm.percent > 95 && vm.autoFinish) {
this.finish()
}
}, 100)
},
increase (cut) {
vm.percent = Math.min(99, vm.percent + cut)
},
hide () {
clearInterval(timer)
// 这里面有2个定时器，外层定时器是让用户可以看到这个 进度已经完成啦
// 内层定时器，由于 opacity 消失需要一定的过渡时间，所以要等待它消失以后
// 在将其进度设置为0，等待下次调用，如果不延迟，那么会看到进度到100后又回到0的动画
setTimeout(() => {
vm.show = false
setTimeout(() => {
vm.percent = 0
timer = null
}, vm.options.transition.opacitySpeed)
}, vm.options.transition.duration)
},
// 下面这2个方法就很简单了，只需要完成进度，然后执行隐藏即可
finish () {
if (Vue.$isServer) return
vm.percent = 100
this.hide()
},
fail () {
if (Vue.$isServer) return
// 修改未成功的状态，实际效果就是改变最后的颜色
vm.canSuccess = false
vm.percent = 100
this.hide()
}
}
// 最后挂在到全局
Vue.prototype.$progress = progress
}
}#
以上是Vue進度條元件的實作教學（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
