欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

Github Star: 26k^[1] 官網(wǎng)^[2]

NProgress 是什么？

NProgress.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，用于在應(yīng)用的頁(yè)面頂部顯示一個(gè)進(jìn)度條，指示頁(yè)面加載或異步操作的進(jìn)度。它非常適合用于單頁(yè)面應(yīng)用程序（SPA），能夠在路由變化時(shí)給用戶(hù)友好的加載提示。本文是 NProgress.js 的基本使用方法和一些配置選項(xiàng)的詳細(xì)介紹。

快速開(kāi)始

安裝和引入

NProgress.js 支持管理工具 npm 或 yarn 安裝，也支持 CDN 引入。

npm install nprogress -S
#
yarn add nprogress

引入時(shí)，別忘了引入 nprogress.css 樣式文件

啟動(dòng)和結(jié)束進(jìn)度條

NProgress.start(); // 啟動(dòng)進(jìn)度條
NProgress.done(); // 結(jié)束進(jìn)度條

設(shè)置進(jìn)度

NProgress.set(0.4); // 設(shè)置進(jìn)度至 40%

設(shè)置進(jìn)度百分比，參數(shù)取值 0 ~ 1 之間。如果傳 0 類(lèi)似于調(diào)用 .start()，傳 1 類(lèi)似于調(diào)用 .done() 方法。

遞增進(jìn)度條

NProgress.inc(); // 隨機(jī)遞增進(jìn)度條
NProgress.inc(0.2); // 以 0.2 的值遞增進(jìn)度條

遞增進(jìn)度條，以隨機(jī)量增加，永遠(yuǎn)不會(huì)到達(dá) 100%。

配置選項(xiàng)

NProgress.configure({
  easing: 'ease', // 動(dòng)畫(huà)方式
  speed: 500, // 遞增進(jìn)度條的速度
  showSpinner: false, // 是否顯示加載指示器
  trickle: false, // 是否開(kāi)啟自動(dòng)遞增行為
  trickleSpeed: 200, // 自動(dòng)遞增間隔
  minimum: 0.3, // 更改啟動(dòng)時(shí)使用的最小百分比
  parent: 'body', // 指定進(jìn)度條的父容器
  barSelector: '[role="bar"]', // 進(jìn)度條選擇器
  spinnerSelector: '[role="spinner"]' // 加載指示器選擇器
});

配置項(xiàng)還有 template 自定義模板，為了保證正常工作，需要保留一個(gè)帶 role='bar' 的元素。參考默認(rèn)模板。

NProgress.configure({
    template: `
    <div class="bar" role="bar">
      <div class="peg"></div>
    </div>
    <div class="spinner" role="spinner">
      <div class="spinner-icon"></div>
    </div>`
})

另外，通過(guò)覆蓋 nprogress.css 樣式，可以實(shí)現(xiàn)定制化樣式。

在 Vue 中使用

在 Vue 項(xiàng)目中，可以將 NProgress.js 集成到路由系統(tǒng)中，方便頁(yè)面跳轉(zhuǎn)時(shí)顯示進(jìn)度條。在 router/index.js 中引入 NProgress 并在路由衛(wèi)士中調(diào)用相應(yīng)的 API。

import NProgress  from 'nprogress'
import 'nprogress/nprogress.css'
// 導(dǎo)入進(jìn)度條
import { start, close } from '../utils/nprogress';
const router = new VueRouter({
  // ...
});
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
router.afterEach(() => {
  NProgress.done();
});

修改進(jìn)度條樣式

通過(guò)添加 CSS 樣式來(lái)自定義進(jìn)度條的顏色和其他視覺(jué)效果。

#nprogress .bar {
  background: green !important; /* 自定義顏色 */
}

總結(jié)

NProgress.js 使用一種簡(jiǎn)單的方式來(lái)改善用戶(hù)體驗(yàn)，在單頁(yè)應(yīng)用中，通過(guò)在頁(yè)面跳轉(zhuǎn)期間顯示進(jìn)度條，可以讓用戶(hù)知道頁(yè)面正在加載，從而減少用戶(hù)的等待焦慮感。通過(guò)本文相信你已經(jīng)能夠在項(xiàng)目中輕松使用 NProgress.js 了。

祝好！

引用鏈接

[1] Github Star: 26k: https://github.com/rstacruz/nprogress
[2] 官網(wǎng): https://ricostacruz.com/nprogress/