抠丁客
Uppy 进度条
@uppy/progress-bar 是一个极简主义的插件，它在一个细长的条形元素中显示当前上传的进度，类似于 YouTube 和 GitHub 在页面间导航时使用的那种。
何时使用？
当你需要一个极简主义的进度指示器，并且正在 构建自己的 UI 时。对于大多数情况，Dashboard 或 Drag & Drop（ 配合 状态栏 ）可能更适合你的需求。
安装
npm
npm install @uppy/progress-baryarn
yarn add @uppy/progress-barCDN
谨慎
该捆绑包包含了大部分的 Uppy 插件，因此这种方法不建议在生产环境中使用，因为当您可能只使用少数几个插件时，您的用户却需要下载所有插件。
但在加速开发环境方面，这可能会很有帮助，所以不妨在开始时使用它来提速。<!-- 1. Add CSS to `<head>` --> <link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet"> <!-- 2. Initialize --> <div id="uppy"></div> <script type="module"> import { Uppy, ProgressBar } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs" const uppy = new Uppy() uppy.use(ProgressBar, { target: '#progress-bar' }) </script>
使用
import Uppy from "@uppy/core";
import ProgressBar from "@uppy/progress-bar";
import "@uppy/core/dist/style.min.css";
import "@uppy/progress-bar/dist/style.min.css";
new Uppy().use(ProgressBar, { target: "#progress-bar" });
API
选项
id
此进度条的唯一标识符（ string，默认：'ProgressBar' ）。
如果你需要添加多个 ProgressBar 实例时，请使用这个选项。
target
将进度条挂载到的 DOM 元素、CSS 选择器或插件（ Element，string，默认：null ）。
fixed
以 position: fixed 的方式将进度条固定在页面顶部（ boolean，默认：false ）。
当设置为 false 时，无论进度条被挂载在哪里，都会显示在该位置。
hideAfterFinish
在上传完成后隐藏进度条（ boolean，默认：true ）。