NProgress 进度条
NProgress 实现进度条
NProgress 是浏览器加载时,出现在浏览器顶部的进度条。
参考文章@小丶侯
参考文章@CEZLZ
一、安装
npm install --save nprogress
yarn add nprogress任选一种安装用法:NProgress.start(); //进度条出现
NProgress.done(); //进度条消失
二、引入使用
- 配合 router 路由守卫使用
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),
});
- 配合 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 配置
NProgress.configure({showSpinner: false, //进度环显示隐藏ease: "ease", //ease:调整动画设置,ease可传递CSS3缓冲动画字符串(如ease、linear 等)。speed: 500, //speed为动画速度(单位ms)minimum:0.3,//最低百分比});设置百分比:百分比:通过设置progress的百分比,调用 .set(n)来控制进度,其中n的取值范围为0-1。
NProgress.set(0.4);
修改进度条颜色
在 App.vue 中的 style 中增加:
#nprogress .bar {background: red !important; //自定义颜色
}
NProgress 进度条相关推荐
- nprogress进度条的使用
nprogress进度条的使用 文章目录 一.安装所需的包 二.使用步骤 1.引入 2.使用 3.修改样式 总结 一.安装所需的包 在项目文件打开终端 npm i nprogress --save 二 ...
- vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
- 插件——nprogress进度条
一,安装 npm install nprogress --save npm install nprogress --save 二,在需要使用的页面引入 这里也要引入axios 在请求拦截器的时候使用 ...
- VUE项目--nprogress进度条
安装 npm install --save nprogress 引入 在src/api/requests.js文件中引入 // 引入进度条 import nprogress from 'nprogre ...
- Vue使用NProgress进度条 zindex
1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import ...
- NProgress进度条
vue项目中使用的一个进度条插件. 安装 使用第三方插件NProgress,添加页面顶部进度条. 使用npm下载: npm install --save nprogress//main.js中进行如下 ...
- vue nprogress进度条插件介绍
实现效果如下: 安装: npm install –save nprogress 用法: //vue中引用 import NProgress from 'nprogress' import 'nprog ...
- Vue.js中使用nprogress进度条
安装 npm install --save nprogress 简单使用 router目录下,index.js 引入 import NProgress from 'nprogress' import ...
- nprogress 进度条插件使用
每次路由跳转时进行加载,显示在页面最上方,代码书写位置在路由前置守卫里,守卫开始时显示进度条,结束后隐藏 GitHub - rstacruz/nprogress: For slim progress ...
最新文章
- 自己写的Treeview控件绑定数据源
- pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index)
- 机器学习高阶认识(一): 机器学习假设与迁移学习
- 使用PHP自带的过滤验证函数:Filter
- [转]java Socket InputStream 阻塞 问题
- PHP中 $_SERVER的信息汇总
- 互联网技术+非技术书单资源分享,都给泥萌!
- oracle导致的负载高,Oracle 11g 数据库服务器CPU、IO负载高的故障排除流程
- 亲戚(信息学奥赛一本通-T1389)
- android 内存检测框架,Android项目内存泄漏检测
- 软考信息系统项目管理师_项目进度管理2---软考高级之信息系统项目管理师014
- 2022-03-23 转载C++中std::auto_ptr被废弃,由std::unique_ptr代替的原因
- iOS上应用Static Framework
- Quartz-CronTrigger解读
- ROS机器人操作系统学习
- 一只潜力十足的专业电竞游戏鼠标——HyperX巨浪RGB电竞鼠标
- c/c++ 实现推箱子小游戏
- 论黑客必知DOS命令技术大拳!
- 自己用的unity学习笔记(一)——unity3d基础操作
- kettle与MySQL数据库建立连接教程