给Nuxt3项目加上顶部加载条

二狗与2021/04/06发布

nuxt

零依赖：也不特别绑定到任何框架。
小尺寸：< 500 字节
易于使用：只几行即可开始使用。支持TypeScript

安装

Terminal

npm i @badrap/bar-of-progress

#使用

在你的nuxt3项目下新建 plugins 目录以及 LoadingBar.js

plugins/LoadingBar.js

import ProgressBar from '@badrap/bar-of-progress';

const progress = new ProgressBar({
  ^{// 进度条的大小（高度px）}
  size: 2,
  ^{// 进度条的颜色。}
  color: "#29e",
  ^{// 自定义类名}
  className: "bar-of-progress",
  ^{// 在进度条之前等待多少毫秒}
  delay: 80,
});

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => progress.start());
  nuxtApp.hook('page:finish', () => progress.finish());
});

现在就有加载状态了

进度条不会立即显示，有一个 80 毫秒的宽限期，允许非常快速完成的任务避免显示进度条。

plugins/LoadingBar.js

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => progress.start());
  nuxtApp.hook('page:finish', () => progress.finish());
  nuxtApp.hook('page:finish', () => setTimeout(() => progress.finish(), 1000));
});