侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

vue3之页面进度条nprogress使用

神兵小将
2022-04-17 / 0 评论 / 0 点赞 / 63 阅读 / 1,085 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

为什么使用

我们在访问很多网站的时候,会发现,在打开网页,或者站内进行页面之间的跳转的时候,在浏览器的顶部显示一个进度,感觉很好,于是今天来研究一下。
image-1650155728800

安装

pnpm add -D nprogress

创建插件

创建一个utils文件夹,在里边新建上nprogress.ts,内容如下:

import { router } from "./router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

export default () => {
  console.log(router);
  router.beforeEach(() => {
    NProgress.start();
  });
  router.afterEach(() => {
    NProgress.done();
  });
};

引用

main.ts中引用:

import nprogress from "./utils/nprogress";

const app = createApp(App);

app.use(nprogress).mount("#app");

配置

当然,他可以配置,扩展包提供配置api接口。

NProgress.configure({
  easing: "ease", // 动画方式ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier等
  speed: 500, // 递增进度条的速度
  trickle: false, // 是否启用间隔
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
  showSpinner: true, // 是否显示加载ico
  parent: "body", // 父级容器,默认document.body
  positionUsing: "", // 定位方式,保持为空即可
  barSelector: '[role="bar"]', // 加载条选择器
  spinnerSelector: '[role="spinner"]', // 加载spinner选择器
  //template: string, // 进度条html模板,不建议调整
});

image-1650157484235

颜色更改

在项目引入的css文件中添加如下:

	#nprogress .bar {
       background: red !important; //自定义颜色
    }

效果

20220417090129

0

评论区