北京官方网站怎么做,wordpress 新页面打开空白页,重庆市造价信息网,三亚新闻头条最新闻我们在一些网站中经常见到导航栏上方的进度条显示#xff0c;大家仔细观察#xff0c;其实csnd中也有类似的效果#xff0c;如下图显示效果#xff0c;我们现在就来一起看看这个功能需求是怎么实现的。 一、功能需求 首先#xff0c;实现这个功能其实不难#xff0c;说实… 我们在一些网站中经常见到导航栏上方的进度条显示大家仔细观察其实csnd中也有类似的效果如下图显示效果我们现在就来一起看看这个功能需求是怎么实现的。 一、功能需求 首先实现这个功能其实不难说实在点其实就是个动画效果大家在学习原生js中的时候应该都接触过来控制动画的移动无非就是让一个小的长方形盒子慢慢的边长通过js来完全可以实现。但是我们这个是项目是vue在vue中不需要我们自己去操作DOM所以我们就使用一款轻量级的进度条插件就是NProgress。
NProgress的官方网址:https://ricostacruz.com/nprogress/
二、使用方法 在vue中先引入所需要的插件 npm i nprogress 下载安装完成后在vue中使用即可
//导入进度条模块
import NProgress from nprogress
import nprogress/nprogress.css
NProgress.start()//显示上方进度条
NProgress.inc() //进度条加一
NProgress.done()//结束进度条
改进度条颜色配置如下
style
// 自定义进度条颜色#nprogress .bar {background: #F811B2 !important; //自定义颜色}
/style
项目中常用就是如此很简单吧
