tml5中實現音頻的話可以用新增的屬性video，但是都會發現其自帶的控制進度條非常不好看，所有很多人都會自定義它們的控制進度條，今天就來做一下音頻控制進度條！

點擊播放后即可看到進度條的圓點在相對于的動起來

代碼

html結構：

css樣式：

javascript：

言

很多時候在訪問網頁的時候我們總是看到頁面在加載中，可以卻不知道要加載多久，無期限的等待總是讓人煩躁不安，所以我們希望能知道網頁加載的進度，這樣我們就能做到心中有數是否繼續等待頁面加載。這個功能我們可以依靠nprogress來實現，它是輕量級的進度條組件，使用簡便，可以很方便集成到應用中來。

安裝nprogress

直接在項目中執行安裝命令：npm install --save nprogress

nprogress方法

NProgress.start() // 進度條開始
NProgress.set() // 將進度設置到具體的百分比位置，取值范圍是0到1.0
NProgress.inc() // 如果少量增加進度，進度將永遠不會得到100%
NProgress.done() // 進度條結束消失
NProgress.configure() // 進度條參數配置

全局引入nprogress

在main.js中引入nprogress插件和樣式，

import NProgress from 'nprogress' // nprogress插件
import 'nprogress/nprogress.css' // nprogress樣式

配置nprogress

在NProgress.configure({})中我們可以對nprogress進行適當的配置，showSpinner 為 false（禁用進度環）、trickle 為 false（關閉進度條步進）、trickleRate （每次步進增長多少）、trickleSpeed （步進間隔，單位毫秒ms）、ease（動畫方向）、speed （動畫速度，單位毫秒ms）、minimum （最小百分比）等等。

NProgress.configure({ showSpinner: false }) //我這里只關閉進度環

Vuerouter路由鉤子

在添加nprogress之前我們需要先了解Vuerouter的beforeEach與afterEach鉤子函數，這是在路由跳轉的時候對路由進行一些權限判斷或者其他操作時定義的處理函數，Vue.beforeEach是在跳轉之前執行，Vue.afterEach是在跳轉之后執行判斷的。

Vue.beforeEach(function(to,form,next){})函數有三個參數，Vue.afterEach(function(to,form))函數有兩個參數：

to:即將進入的路由對象

from:當前導航即將離開的路由對象

next:調用該方法，進入下一個鉤子函數，next(false):則中斷當前的導航。

在路由中添加nprogress

在main.js中全局鉤子函數，在路由跳轉前用NProgress.start()標記下進度條開始，在路由跳轉后用NProgress.done()標記下結束，這樣在路由跳轉的時候就可以在頁面頂部看到一個progress bar進度條了。

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

在請求中添加nprogress

如果你希望每次發送請求的時候也出現進度條的話可以在axios封裝中的路由攔截中添加nprogress，如何封裝axios可以參考Vue實戰037：axios二次封裝和使用。

// 請求攔截器(請求發出前處理一些請求)
axios.interceptors.request.use( 
 NProgress.start()
})
// 響應攔截器（處理響應數據）
axios.interceptors.response.use(
 NProgress.done()
)

為了讓結構更滑清晰簡潔些，我們重新整理下代碼，即然nprogress主要是用在路由跳轉上，這里我將nprogress歸納放入router中，切記實例化router之后調用Vuerouter的beforeEach與afterEach鉤子函數生效。

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
 mode: 'history',
 routes: routers
})
export default router
 
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})

修改nprogress樣式

在app.vue中添加如下樣式即可修改nprogress樣式，記得添加 !important來覆蓋原有樣式

#nprogress .bar {
 background: #66B1FF !important; // 自定義顏色
 height: 20px !important; // 自定義高度
 }

歡迎關注本人的公眾號：編程手札，文章也會在公眾號更新