简介
@beisen-phoenix/progress 是一款前端进度条组件，可以方便地帮助你实现页面上的加载进度展示。本文将详细介绍该组件的功能、使用方法以及相关注意事项。
功能
@beisen-phoenix/progress 组件主要提供以下功能：
- 能够自定义颜色、高度、形状等样式属性；
- 能够响应进度百分比变化，实时更新进度条；
- 能够暴露出完整的可操作 API，支持动态调用控制进度条的行为。
安装
你可以在命令行中使用 npm 或者 yarn 安装该组件：
npm install @beisen-phoenix/progress --save-dev # 或者 yarn add @beisen-phoenix/progress -D
在你的项目中引入该组件：
import Progress from '@beisen-phoenix/progress'
使用方法
基础用法
@beisen-phoenix/progress 具有非常简单的 API，只需要在 HTML 中插入一个空的 div 容器，在 JavaScript 中实例化 Progress 对象，并传入该容器元素即可。默认情况下，进度条将被渲染为矩形，高度为 4px，颜色为红色。
<div id="progress"></div>
import Progress from '@beisen-phoenix/progress'
const progress = new Progress(document.getElementById('progress'))自定义样式
如果你需要自定义进度条的样式，可以在实例化 Progress 对象时传入一个配置对象，该对象包含了所有可选的样式属性。例如，你可以将进度条的颜色改为绿色：
const progress = new Progress(document.getElementById('progress'), {
color: 'green'
})目前支持的所有样式属性如下：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| color | 字符串 | '#f7555f' |
进度条颜色 |
| height | 数字 | 4 |
进度条高度 |
| rounded | 布尔值 | false |
是否使用圆角边框 |
| easing | 字符串 | 'linear' |
进度条渐变方式，可选值为 'linear' 或 'ease' |
| duration | 数字 | 1000 |
动画过渡时间，以毫秒为单位 |
更新进度条状态
一旦你的页面需要加载一些资源，例如图片、样式表或者 JavaScript 文件，你可以在加载过程中，将当前进度的百分比传给 Progress 对象，以实时更新进度条状态。
-- -------------------- ---- ------- ----- -------- - --- --------------------------------------------- -- -------------- -- --- -- --- -- --- -- --- -- ---- ------------------- ------------------- ------------------- -- --- --------------------
控制进度条
@beisen-phoenix/progress 还提供了一些简单的 API，用于动态控制进度条的行为。例如，你可以通过调用 reset 方法，将进度条重置为初始状态：
const progress = new Progress(document.getElementById('progress'))
progress.update(50) // 当前进度为 50%
progress.reset() // 进度条回到 0%注意事项
@beisen-phoenix/progress是一个基于 CSS3 的进度条组件，其表现形式是纯前端的，不依赖服务器端的任何计算和存储。- 虽然该组件提供了大量的配置选项，但请注意避免过度使用自定义样式，可能会影响你的页面渲染效果。
- 如果你需要在组件中使用异步请求，建议将该请求转移到外部控制，在请求结束后再手动更新进度条状态。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
-------
------
---- --------------------
------- --------------------------
-------
--------- -------------------- ---- -------
------ -------- ---- --------------------------
----- -------- - --- --------------------------------------------- -
------ --------
------- --
-------- ----
--
--- ------------ - -
--- ---------- - -------------- -- -
------------ -- -
-- ------------- - ---- -
-------------------------
- ---- -
-----------------------------
-
-- ----
------------- -- -
----------------
-- -----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135963