vue中走马灯的下标做成那种vue实现百分比进度条条的样式？

来源：蜘蛛抓取(WebSpider) 时间：2023-03-22 09:03 标签： vue实现百分比进度条

简介：NProgress 是浏览器加载时，出现在浏览器顶部的进度条。
文章目录：
一、NProgress 安装
二、NProgress 使用
三、NProgress 配置
四、Vue 中修改进度条颜色
一、NProgress 安装
1、使用 npm 或者 yarn 安装及可
npm install --save nprogress
yarn add nprogress
任选一种安装
2、用法
NProgress.start(); //进度条出现
NProgress.done(); //进度条消失
二、NProgress 使用
1、路由文件中导入，页面跳转出现进度条
入口文件 main.js 引入 nprogress
import App from './App'
import VueRouter from 'vue-router'
import router from './router' // 路由配置文件
//引入 nprogress
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 引入样式
Vue.use(VueRouter)
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
// 进度条开始
router.beforeEach((to,from,next) => {
NProgress.start()
next()
})
// 进度条结束
router.afterEach(() => {
NProgress.done()
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
2、写在 axios 的请求拦截器和响应拦截器里，每次只要触发 axios 请求就加载进度条
// axios 请求拦截器
axios.interceptors.request.use(
config => {
NProgress.start() // 加载进度条开始
return config
},
error => {
return Promise.reject(error)
}
)
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(
response => {
NProgress.done() // 加载进度条结束
return response
},
error => {
return Promise.reject(error)
}
)
三、NProgress 配置
1、showSpinner：进度环显示隐藏
NProgress.configure({showSpinner: false});
2、ease：调整动画设置，ease可传递CSS3缓冲动画字符串(如ease、linear 等)。speed为动画速度(单位ms)
NProgress.configure({ease:'ease',speed:500});
3、minimum：最低百分比
NProgress.configure({minimum:0.3});
4、百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。
NProgress.set(0.4);
四、Vue 中修改进度条颜色
在App.vue中的style中增加：
#nprogress .bar {
background: red !important; //自定义颜色
}

我要回帖

更多关于 vue实现百分比进度条 的文章

 

随机推荐