diff --git a/packages/progress/__tests__/progress.spec.ts b/packages/progress/__tests__/progress.spec.ts index 7a50b6a066..04ddbd0993 100644 --- a/packages/progress/__tests__/progress.spec.ts +++ b/packages/progress/__tests__/progress.spec.ts @@ -129,4 +129,13 @@ describe('Progress.vue', () => { }) expect(wrapper.find('.el-progress__text').text()).toBe('占比100%') }) + + test('slot', () => { + const wrapper = mount(Progress, { + slots: { + default: '自定义内容', + }, + }) + expect(wrapper.find('.el-progress__text').text()).toBe('自定义内容') + }) }) diff --git a/packages/progress/src/index.vue b/packages/progress/src/index.vue index 964adba84e..f58a2da10e 100644 --- a/packages/progress/src/index.vue +++ b/packages/progress/src/index.vue @@ -17,7 +17,11 @@
-
{{ content }}
+
+ + {{ content }} + +
@@ -43,12 +47,14 @@
- - + + {{ content }} + +
@@ -172,7 +178,7 @@ export default defineComponent({ const circlePathStyle = computed(() => { return { - strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100) }px, ${perimeter.value}px`, + strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`, strokeDashoffset: strokeDashoffset.value, transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease', } @@ -249,6 +255,12 @@ export default defineComponent({ } } + const slotData = computed(() => { + return { + percentage: props.percentage, + } + }) + return { barStyle, relativeStrokeWidth, @@ -264,6 +276,7 @@ export default defineComponent({ progressTextSize, content, getCurrentColor, + slotData, } }, }) diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss index e93fde80a9..29badf8fcf 100644 --- a/packages/theme-chalk/src/progress.scss +++ b/packages/theme-chalk/src/progress.scss @@ -5,13 +5,14 @@ @include b(progress) { position: relative; line-height: 1; + display: flex; + align-items: center; @include e(text) { - font-size:14px; + font-size: 14px; color: $--color-text-regular; - display: inline-block; - vertical-align: middle; - margin-left: 10px; + margin-left: 5px; + min-width: 50px; line-height: 1; i { @@ -20,7 +21,7 @@ } } - @include m((circle,dashboard)) { + @include m((circle, dashboard)) { display: inline-block; .#{$namespace}-progress__text { @@ -91,11 +92,7 @@ } @include b(progress-bar) { - padding-right: 50px; - display: inline-block; - vertical-align: middle; - width: 100%; - margin-right: -55px; + flex-grow: 1; box-sizing: border-box; @include e(outer) { diff --git a/website/demo-styles/progress.scss b/website/demo-styles/progress.scss index 0738d2c8b5..e3deb70786 100644 --- a/website/demo-styles/progress.scss +++ b/website/demo-styles/progress.scss @@ -3,7 +3,20 @@ margin-bottom: 15px; width: 350px; } + .#{$namespace}-progress--circle { margin-right: 15px; } + + .percentage-value { + display: block; + margin-top: 10px; + font-size: 28px; + } + + .percentage-label { + display: block; + margin-top: 10px; + font-size: 12px; + } } diff --git a/website/docs/en-US/progress.md b/website/docs/en-US/progress.md index 257c2f5430..c0fb694e4b 100644 --- a/website/docs/en-US/progress.md +++ b/website/docs/en-US/progress.md @@ -159,6 +159,29 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b ``` ::: +### Customized content + +:::demo Use default slot to add customized content. + +```html + + Content + + + Content + + + + + + + +``` +::: + ### Attributes | Attribute | Description | Type | Accepted Values | Default | | --- | ---- | ---- | ---- | ---- | @@ -172,3 +195,8 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b | show-text | whether to show percentage | boolean | — | true | | stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | format | custom text format | function(percentage) | — | — | + +### Slot +| name | Description | +|------|--------| +| default | Customized content, parameter is { percentage } | diff --git a/website/docs/es/progress.md b/website/docs/es/progress.md index 96511d468f..6ad76fe771 100644 --- a/website/docs/es/progress.md +++ b/website/docs/es/progress.md @@ -157,6 +157,29 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr ``` ::: +### Customized content + +:::demo Use default slot to add customized content. + +```html + + Content + + + Content + + + + + + + +``` +::: + ### Atributos | Atributo | Descripción | Tipo | Valores aceptado | Por defecto | | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- | @@ -170,3 +193,8 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr | show-text | mostrar porcentaje | boolean | — | true | | stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | format | personalizar el formato de texto estableciendo format | function(percentage) | — | — | + +### Slot +| name | Description | +|------|--------| +| default | Customized content, parameter is { percentage } | diff --git a/website/docs/fr-FR/progress.md b/website/docs/fr-FR/progress.md index ab4b5bfd3d..9119d24b04 100644 --- a/website/docs/fr-FR/progress.md +++ b/website/docs/fr-FR/progress.md @@ -159,6 +159,29 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser ``` ::: +### Customized content + +:::demo Use default slot to add customized content. + +```html + + Content + + + Content + + + + + + + +``` +::: + ### Attributs | Attribut | Description | Type | Valeurs acceptées | Défaut | @@ -173,3 +196,8 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser | show-text | Si le pourcentage doit être affiché. | boolean | — | true | | stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — | + +### Slot +| name | Description | +|------|--------| +| default | Customized content, parameter is { percentage } | diff --git a/website/docs/jp/progress.md b/website/docs/jp/progress.md index 67576fd9c6..eaf4cbadf9 100644 --- a/website/docs/jp/progress.md +++ b/website/docs/jp/progress.md @@ -159,6 +159,29 @@ ``` ::: +### Customized content + +:::demo Use default slot to add customized content. + +```html + + Content + + + Content + + + + + + + +``` +::: + ### 属性 | Attribute | Description | Type | Accepted Values | Default | | --- | ---- | ---- | ---- | ---- | @@ -172,3 +195,8 @@ | show-text | パーセンテージ表示の有無 | boolean | — | true | | stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round | | format | カスタムテキスト形式 | function(percentage) | — | — | + +### Slot +| name | Description | +|------|--------| +| default | Customized content, parameter is { percentage } | diff --git a/website/docs/zh-CN/progress.md b/website/docs/zh-CN/progress.md index 5b9cbe9615..5936a9b95e 100644 --- a/website/docs/zh-CN/progress.md +++ b/website/docs/zh-CN/progress.md @@ -163,6 +163,29 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形 ``` ::: +### 自定义内容 + +:::demo 通过默认插槽添加自定义内容。 + +```html + + 自定义内容 + + + 自定义内容 + + + + + + + +``` +::: + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | @@ -176,3 +199,8 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形 | show-text | 是否显示进度条文字内容 | boolean | — | true | | stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round | | format | 指定进度条文字内容 | function(percentage) | — | — | + +### Slot +| name | 说明 | +|------|--------| +| default | 自定义内容，参数为 { percentage } |