qier-progress 开源项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00584/article/details/142010192

qier-progress 开源项目使用教程

qier-progress:dancer: Look at me, I am a slim progress bar and very colorful / 支持彩色或单色的顶部进度条项目地址:https://gitcode.com/gh_mirrors/qi/qier-progress

1、项目介绍

qier-progress 是一个轻量级且多彩的进度条工具，适用于在等待时间较长的操作中提供反馈，如跳转链接、请求数据、加载或上传文件和图片等。它能够有效减少用户的焦虑感，特别是在使用过 nprogress 的用户中，qier-progress 提供了类似的体验。

2、项目快速启动

安装

首先，通过 npm 安装 qier-progress：

npm install --save qier-progress

使用

在支持 ES6 模块的框架（如 Vue、React、Angular）中导入模块：

import QProgress from 'qier-progress';

创建实例并控制进度条：

const qprogress = new QProgress();

// 开始进度条
qprogress.start();

// 完成进度条
qprogress.finish();

高级用法

设置进度值：

qprogress.set(0.0); // 等同于 start()
qprogress.set(0.6); // 设置进度为 60%
qprogress.set(1.0); // 等同于 finish()

3、应用案例和最佳实践

案例一：在 Vue 项目中使用

在 Vue 项目中，可以在全局或组件级别使用 qier-progress 来显示加载状态。

// main.js
import Vue from 'vue';
import QProgress from 'qier-progress';

const qprogress = new QProgress();

Vue.prototype.$qprogress = qprogress;

// 在组件中使用
this.$qprogress.start();
this.$qprogress.finish();

案例二：在 React 项目中使用

在 React 项目中，可以在请求数据时使用 qier-progress 来显示加载进度。

import React, { useEffect } from 'react';
import QProgress from 'qier-progress';

const qprogress = new QProgress();

const MyComponent = () => {
  useEffect(() => {
    qprogress.start();
    fetchData().then(() => {
      qprogress.finish();
    });
  }, []);

  return <div>Loading...</div>;
};