這篇文章帶給大家的內容是關於 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-router 的 beforeResolve 宣告週期鉤子,或是寫一個計時器模擬非同步來測試一下。
#
以上是Vue進度條元件的實作教學(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!