在vue3+TS中使用nprogress进度条插件

1.安装插件

npm i nprogress

因为当前是TS项目所以还需要安装它的类型声明文件:

npm i @types/nprogress 

2.使用 nprogress

这里新建了一个ts文件稍微封装了一下:

import NProgress from "nprogress";
import "nprogress/nprogress.css";


NProgress.configure({
  easing: "ease", // 动画方式
  speed: 1000, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 更改启动时使用的最小百分比
  parent: "body", //指定进度条的父容器
});

// 开启进度条
export const start = () => {
  NProgress.start();
};

// 关闭进度条
export const close = () => {
  NProgress.done();
};

接着就是使用方式,我是放在了路由守卫里面:

import {start,close} from '@/router/nprogress'
// 路由前置守卫
router.beforeEach((to, from, next) => {
start()
 
next();
});

// 路由后置守卫
router.afterEach((to, from) => {
  close()
});

最终呈现效果:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值