Nprogress进度条

一. 安装对应依赖

两种方法:分别针对于终端和可视化窗口,

第一种方式为:打开终端-输入npm i nprogress –save nprogress

第二种方法为:打开可视化窗口-依赖面板-安装依赖-选择运行依赖-搜索nprogress插件(一般为0.2.0版本)

二.  进度条的使用原理

对于nprogress包来说,方法Nprogerss.start()和Nprogress.done()分别控制进度条的显与隐藏,那么当发起数据请求时,进度条需要显示,在请求结束返回响应之后进度条需要隐藏,这就要求进度条的显隐与数据的请求相关联,通过请求来展现或者隐藏进度条的状态

三. 操作原理

(1) 首先进入项目入口函数,一般为main,导入Nprogress包和对应的Css

(2) 在main方法的请求拦截器当中配置Nprogerss.start()和Nprogress.done()函数,最后return config,完成配置


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容