mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(progress): add default slot (#1426)

Browse Source 
* feat(progress): add default slot

* feat: add slot param

* feat: update

* feat: perf slot
This commit is contained in:
kooriookami 2021-02-05 16:27:44 +08:00 committed by GitHub
parent 6cba9795d6
commit fcf86b9730
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 187 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/progress/__tests__/progress.spec.ts
View File

@ -129,4 +129,13 @@ describe('Progress.vue', () => {
}) })
expect(wrapper.find('.el-progress__text').text()).toBe('占比100%') 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('自定义内容')
})
}) })

23
packages/progress/src/index.vue
View File

@ -17,7 +17,11 @@
<div v-if="type === 'line'" class="el-progress-bar"> <div v-if="type === 'line'" class="el-progress-bar">
<div class="el-progress-bar__outer" :style="{height: `${strokeWidth}px`}"> <div class="el-progress-bar__outer" :style="{height: `${strokeWidth}px`}">
<div class="el-progress-bar__inner" :style="barStyle"> <div class="el-progress-bar__inner" :style="barStyle">
<div v-if="showText && textInside" class="el-progress-bar__innerText">{{ content }}</div> <div v-if="(showText || $slots.default) && textInside" class="el-progress-bar__innerText">
<slot v-bind="slotData">
<span>{{ content }}</span>
</slot>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -43,12 +47,14 @@
</svg> </svg>
</div> </div>
<div <div
v-if="showText && !textInside" v-if="(showText || $slots.default) && !textInside"
class="el-progress__text" class="el-progress__text"
:style="{fontSize: `${progressTextSize}px`}" :style="{fontSize: `${progressTextSize}px`}"
> >
<template v-if="!status">{{ content }}</template> <slot v-bind="slotData">
<i v-else :class="iconClass"></i> <span v-if="!status">{{ content }}</span>
<i v-else :class="iconClass"></i>
</slot>
</div> </div>
</div> </div>
</template> </template>
@ -172,7 +178,7 @@ export default defineComponent({
const circlePathStyle = computed(() => { const circlePathStyle = computed(() => {
return { 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, strokeDashoffset: strokeDashoffset.value,
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease', 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 { return {
barStyle, barStyle,
relativeStrokeWidth, relativeStrokeWidth,
@ -264,6 +276,7 @@ export default defineComponent({
progressTextSize, progressTextSize,
content, content,
getCurrentColor, getCurrentColor,
slotData,
} }
}, },
}) })

17
packages/theme-chalk/src/progress.scss
View File

@ -5,13 +5,14 @@
@include b(progress) { @include b(progress) {
position: relative; position: relative;
line-height: 1; line-height: 1;
display: flex;
align-items: center;
@include e(text) { @include e(text) {
font-size:14px; font-size: 14px;
color: $--color-text-regular; color: $--color-text-regular;
display: inline-block; margin-left: 5px;
vertical-align: middle; min-width: 50px;
margin-left: 10px;
line-height: 1; line-height: 1;
i { i {
@ -20,7 +21,7 @@
} }
} }
@include m((circle,dashboard)) { @include m((circle, dashboard)) {
display: inline-block; display: inline-block;
.#{$namespace}-progress__text { .#{$namespace}-progress__text {
@ -91,11 +92,7 @@
} }
@include b(progress-bar) { @include b(progress-bar) {
padding-right: 50px; flex-grow: 1;
display: inline-block;
vertical-align: middle;
width: 100%;
margin-right: -55px;
box-sizing: border-box; box-sizing: border-box;
@include e(outer) { @include e(outer) {

13
website/demo-styles/progress.scss
View File

@ -3,7 +3,20 @@
margin-bottom: 15px; margin-bottom: 15px;
width: 350px; width: 350px;
} }
.#{$namespace}-progress--circle { .#{$namespace}-progress--circle {
margin-right: 15px; margin-right: 15px;
} }
.percentage-value {
display: block;
margin-top: 10px;
font-size: 28px;
}
.percentage-label {
display: block;
margin-top: 10px;
font-size: 12px;
}
} }

28
website/docs/en-US/progress.md
View File

@ -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
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
```
:::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | 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 | | show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | custom text format | function(percentage) | — | — | | format | custom text format | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| default | Customized content, parameter is { percentage } |

28
website/docs/es/progress.md
View File

@ -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
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
```
:::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto | | 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 | | show-text | mostrar porcentaje | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round | | 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) | — | — | | format | personalizar el formato de texto estableciendo format | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| default | Customized content, parameter is { percentage } |

28
website/docs/fr-FR/progress.md
View File

@ -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
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
```
:::
### Attributs ### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut | | 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 | | 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 | | 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) | — | — | | format | Vous pouvez personnaliser le format du texte en définissant le format | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| default | Customized content, parameter is { percentage } |

28
website/docs/jp/progress.md
View File

@ -159,6 +159,29 @@
``` ```
::: :::
### Customized content
:::demo Use default slot to add customized content.
```html
<el-progress :percentage="50">
<el-button type="text">Content</el-button>
</el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
```
:::
### 属性 ### 属性
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
| --- | ---- | ---- | ---- | ---- | | --- | ---- | ---- | ---- | ---- |
@ -172,3 +195,8 @@
| show-text | パーセンテージ表示の有無 | boolean | — | true | | show-text | パーセンテージ表示の有無 | boolean | — | true |
| stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round | | stroke-linecap | 終点でのサークル/ダッシュボード型の形状 | string | butt/round/square | round |
| format | カスタムテキスト形式 | function(percentage) | — | — | | format | カスタムテキスト形式 | function(percentage) | — | — |
### Slot
| name | Description |
|------|--------|
| default | Customized content, parameter is { percentage } |

28
website/docs/zh-CN/progress.md
View File

@ -163,6 +163,29 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
``` ```
::: :::
### 自定义内容
:::demo 通过默认插槽添加自定义内容。
```html
<el-progress :percentage="50">
<el-button type="text">自定义内容</el-button>
</el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>自定义内容</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" icon="el-icon-check" circle></el-button>
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">当前进度</span>
</template>
</el-progress>
```
:::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
@ -176,3 +199,8 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
| show-text | 是否显示进度条文字内容 | boolean | — | true | | show-text | 是否显示进度条文字内容 | boolean | — | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round | | stroke-linecap | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
| format | 指定进度条文字内容 | function(percentage) | — | — | | format | 指定进度条文字内容 | function(percentage) | — | — |
### Slot
| name | 说明 |
|------|--------|
| default | 自定义内容，参数为 { percentage } |