From 9a577d65cba1ea6f4d1317597c97d21d94ba7562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=91=E5=A8=81?= Date: Wed, 21 Apr 2021 13:47:29 +0800 Subject: [PATCH] feat(progress): indeterminate progress bar (#1832) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: indeterminate-progress * docs: 补充属性 * fix: 更新单元测试用例 * chore: 优化性能 * docs: Indeterminate progress other lang * chore: progress bem classname && docs * docs: speed -> duration * docs: progress docs --- packages/progress/__tests__/progress.spec.ts | 2 +- packages/progress/src/index.vue | 19 ++++++++++++++- packages/theme-chalk/src/progress.scss | 16 +++++++++++++ website/docs/en-US/progress.md | 25 ++++++++++++++++++++ website/docs/es/progress.md | 25 ++++++++++++++++++++ website/docs/fr-FR/progress.md | 25 ++++++++++++++++++++ website/docs/jp/progress.md | 25 ++++++++++++++++++++ website/docs/zh-CN/progress.md | 25 ++++++++++++++++++++ 8 files changed, 160 insertions(+), 2 deletions(-) diff --git a/packages/progress/__tests__/progress.spec.ts b/packages/progress/__tests__/progress.spec.ts index 04ddbd0993..bf37764bf1 100644 --- a/packages/progress/__tests__/progress.spec.ts +++ b/packages/progress/__tests__/progress.spec.ts @@ -9,7 +9,7 @@ describe('Progress.vue', () => { }, }) expect(wrapper.find('.el-progress__text').text()).toBe('66%') - expect(wrapper.find('.el-progress-bar__inner').attributes('style')).toBe('width: 66%;') + expect(wrapper.find('.el-progress-bar__inner').attributes('style')).toBe('width: 66%; animation-duration: 3s;') }) test('status', () => { diff --git a/packages/progress/src/index.vue b/packages/progress/src/index.vue index f58a2da10e..e1b3ada4ce 100644 --- a/packages/progress/src/index.vue +++ b/packages/progress/src/index.vue @@ -16,7 +16,13 @@ >
-
+
{{ content }} @@ -68,6 +74,8 @@ interface IProgressProps { type: string percentage: number status: string + indeterminate: boolean + duration: number strokeWidth: number strokeLinecap: string textInside: boolean @@ -96,6 +104,14 @@ export default defineComponent({ default: '', validator: (val: string): boolean => ['', 'success', 'exception', 'warning'].indexOf(val) > -1, }, + indeterminate: { + type: Boolean, + default: false, + }, + duration: { + type: Number, + default: 3, + }, strokeWidth: { type: Number, default: 6, @@ -129,6 +145,7 @@ export default defineComponent({ const barStyle = computed(() => { return { width: `${props.percentage}%`, + animationDuration: `${props.duration}s`, backgroundColor: getCurrentColor(props.percentage), } }) diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss index 29badf8fcf..a09d346c10 100644 --- a/packages/theme-chalk/src/progress.scss +++ b/packages/theme-chalk/src/progress.scss @@ -89,6 +89,7 @@ color: $--color-danger; } } + } @include b(progress-bar) { @@ -116,6 +117,11 @@ transition: width 0.6s ease; @include utils-vertical-center; + + @include m(indeterminate) { + transform: translateZ(0); + animation: indeterminate 3s infinite; + } } @include e(innerText) { @@ -136,3 +142,13 @@ background-position: 32px 0; } } + +@keyframes indeterminate { + 0% { + left: -100%; + } + + 100% { + left: 100%; + } +} diff --git a/website/docs/en-US/progress.md b/website/docs/en-US/progress.md index ee9ac3cd2b..02355d596f 100644 --- a/website/docs/en-US/progress.md +++ b/website/docs/en-US/progress.md @@ -182,6 +182,29 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b ``` ::: +### Indeterminate progress + +:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration. + +```html + + + + + + + +``` +::: + ### Attributes | Attribute | Description | Type | Accepted Values | Default | | --- | ---- | ---- | ---- | ---- | @@ -190,6 +213,8 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b | stroke-width | the width of progress bar | number | — | 6 | | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false | | status | the current status of progress bar | string | success/exception/warning | — | +| indeterminate | set indeterminate progress | boolean | - | false | +| duration | control the animation duration of indeterminate progress | number | - | 3 | | color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' | | width | the canvas width of circle progress bar | number | — | 126 | | show-text | whether to show percentage | boolean | — | true | diff --git a/website/docs/es/progress.md b/website/docs/es/progress.md index 6ad76fe771..5909156d6d 100644 --- a/website/docs/es/progress.md +++ b/website/docs/es/progress.md @@ -180,6 +180,29 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr ``` ::: +### Indeterminate progress + +:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration. + +```html + + + + + + + +``` +::: + ### Atributos | Atributo | Descripción | Tipo | Valores aceptado | Por defecto | | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- | @@ -188,6 +211,8 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr | stroke-width | ancho de la barra de progreso | number | — | 6 | | text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false | | status | estado actual de la barra de progreso | string | success/exception/warning | — | +| indeterminate | set indeterminate progress | boolean | - | false | +| duration | control the animation duration of indeterminate progress | number | - | 3 | | color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' | | width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 | | show-text | mostrar porcentaje | boolean | — | true | diff --git a/website/docs/fr-FR/progress.md b/website/docs/fr-FR/progress.md index 9119d24b04..d2f9518f6a 100644 --- a/website/docs/fr-FR/progress.md +++ b/website/docs/fr-FR/progress.md @@ -182,6 +182,29 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser ``` ::: +### Indeterminate progress + +:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration. + +```html + + + + + + + +``` +::: + ### Attributs | Attribut | Description | Type | Valeurs acceptées | Défaut | @@ -191,6 +214,8 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser | stroke-width | La largeur de la barre. | number | — | 6 | | text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false | | status | Le statut actuel de la progression. | string | success/exception/text | — | +| indeterminate | set indeterminate progress | boolean | - | false | +| duration | control the animation duration of indeterminate progress | number | - | 3 | | color | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' | | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 | | show-text | Si le pourcentage doit être affiché. | boolean | — | true | diff --git a/website/docs/jp/progress.md b/website/docs/jp/progress.md index eaf4cbadf9..c5c6e8f271 100644 --- a/website/docs/jp/progress.md +++ b/website/docs/jp/progress.md @@ -182,6 +182,29 @@ ``` ::: +### Indeterminate progress + +:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration. + +```html + + + + + + + +``` +::: + ### 属性 | Attribute | Description | Type | Accepted Values | Default | | --- | ---- | ---- | ---- | ---- | @@ -190,6 +213,8 @@ | stroke-width | プログレスバーの幅 | number | — | 6 | | text-inside | パーセントをプログレスバーの中に配置するかどうか、`type`が 'line'の場合のみ動作します。 | boolean | — | false | | status | プログレスバーの現在の状態 | string | success/exception/warning | — | +| indeterminate | 操作にかかる時間を示しません | boolean | - | false | +| duration | indeterminateのプログレスバーのアニメーション期間 | number | - | 3 | | color | プログレスバーの背景色を指定します。`status` プロップをオーバーライドします。 | string/function/array | — | '' | | width | サークルプログレスバーのキャンバス幅 | number | — | 126 | | show-text | パーセンテージ表示の有無 | boolean | — | true | diff --git a/website/docs/zh-CN/progress.md b/website/docs/zh-CN/progress.md index 5936a9b95e..a9546b196f 100644 --- a/website/docs/zh-CN/progress.md +++ b/website/docs/zh-CN/progress.md @@ -186,6 +186,29 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形 ``` ::: +### 动画进度条 + +:::demo Progress 组件设置 `indeterminate` 属性控制进度条运动。通过设置 `duration` 属性可以控制运动速度。 + +```html + + + + + + + +``` +::: + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | @@ -194,6 +217,8 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形 | stroke-width | 进度条的宽度，单位 px | number | — | 6 | | text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false | | status | 进度条当前状态 | string | success/exception/warning | — | +| indeterminate | 是否为动画进度条 | boolean | - | false | +| duration | 控制动画进度条速度 | number | - | 3 | | color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' | | width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 | | show-text | 是否显示进度条文字内容 | boolean | — | true |