当前位置: 首页 > 编程笔记 >

Vue使用NProgress进度条的方法

吴缪文
2023-03-14
本文向大家介绍Vue使用NProgress进度条的方法,包括了Vue使用NProgress进度条的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下

1、安装

npm i -S nprogress

2、在router.js中使用

import Vue from 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


Vue.use(Router)

const router = new Router({
 mode: 'history',
 routes: [
 ]
})

router.beforeEach((to, from, next) => {
 NProgress.start()
 /// code
})
router.afterEach(() => {
 NProgress.done()
})

3、nprogress的z-index

假如你的header比nprogress的高,可能看不见进度条,可以采用这个办法实施,其中数字比header高就行,或者,你改header的z-index

#nprogress {
 .bar {
  z-index: 15031;
 }
 .spinner {
  z-index: 15031;
 }
}

4、nprogress修改颜色

#nprogress .bar {
  background: red !important; //颜色可修改
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vue使用nprogress加载路由进度条的方法,包括了vue使用nprogress加载路由进度条的方法的使用技巧和注意事项,需要的朋友参考一下 1、效果图 2、安装 基本用法 3、在路由中使用 PS:下面看下Vue使用NProgress的方法 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ githu

  • 本文向大家介绍vue配置nprogress实现页面顶部进度条,包括了vue配置nprogress实现页面顶部进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 2. 在main.js中导入 源码~~~~~~方便你复制  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持

  • 本文向大家介绍NProgress显示顶部进度条效果及使用详解,包括了NProgress显示顶部进度条效果及使用详解的使用技巧和注意事项,需要的朋友参考一下 NProgress实现显示加载进度条效果,具有逼真的动画涓涓细流来说服你的用户,无页面跳转效果 ,极大提高用户体验效果 1. 官网下载地址 实现效果如下GIF图片所示:(请求的数据比较小,所以跑得比较快,可以开发者工具Network设置为3G以

  • 本文向大家介绍vue实现拖拽进度条,包括了vue实现拖拽进度条的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现拖拽进度条的具体代码,供大家参考,具体内容如下 组件代码: 调用: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 这是我第一次在C#中使用进度条。我的代码正在复制一些文件,我想通过进度条显示进度。 我不喜欢我的代码的一点是,我必须遍历所有文件来设置最大值...后来我再次经历同样的过程来复制文件。 我只是想不出一个方法来确保在酒吧里流利的进步而不这样做。我首先必须知道最大值对吗?或者有什么诀窍吗? 代码如下所示: > 设置最大值: 复制文件: 增加进度条: 私有静态无效记录器(字符串输出){log.Text=“

  • 本文向大家介绍js实现进度条的方法,包括了js实现进度条的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下: 1.setTimeout和clearTimeout 效果图: 2.setInterval和clearInterval 效果图: 3.setTimeout和setInterval区别 setTimeout() 只执行 c