test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [progress] setting both color and striped is invalid (#17235)

Browse Source 
* fix(components): [progress] setting both color and striped is invalid

* chore: fix test
This commit is contained in:
btea 2024-06-21 12:44:55 +08:00 committed by GitHub
parent a8a2298a6d
commit 58b60e52dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/components/progress/__tests__/progress.test.tsx
View File

@ -67,7 +67,7 @@ describe('Progress.vue', () => {
expect(
wrapper.find('.el-progress-bar__inner').attributes('style')
).toContain('background: rgb(255, 255, 255);')
).toContain('background-color: rgb(255, 255, 255);')
})
test('striped', () => {
@ -103,7 +103,7 @@ describe('Progress.vue', () => {
expect(
wrapper.find('.el-progress-bar__inner').attributes('style')
).toContain('background: rgb(1, 2, 3);')
).toContain('background-color: rgb(1, 2, 3);')
percentage.value = 60
@ -111,7 +111,7 @@ describe('Progress.vue', () => {
expect(
wrapper.find('.el-progress-bar__inner').attributes('style')
).toContain('background: rgb(4, 5, 6);')
).toContain('background-color: rgb(4, 5, 6);')
})
test('color is array', async () => {
@ -131,14 +131,14 @@ describe('Progress.vue', () => {
expect(
wrapper.find('.el-progress-bar__inner').attributes('style')
).toContain('background: rgb(1, 1, 1);')
).toContain('background-color: rgb(1, 1, 1);')
percentage.value = 89
await nextTick()
expect(
wrapper.find('.el-progress-bar__inner').attributes('style')
).toContain('background: rgb(9, 9, 9);')
).toContain('background-color: rgb(9, 9, 9);')
})
test('format', () => {

18
packages/components/progress/src/progress.vue
View File

@ -112,11 +112,19 @@ const props = defineProps(progressProps)
const ns = useNamespace('progress')
const barStyle = computed<CSSProperties>(() => ({
width: `${props.percentage}%`,
animationDuration: `${props.duration}s`,
background: getCurrentColor(props.percentage),
}))
const barStyle = computed<CSSProperties>(() => {
const barStyle: CSSProperties = {
width: `${props.percentage}%`,
animationDuration: `${props.duration}s`,
}
const color = getCurrentColor(props.percentage)
if (color.includes('gradient')) {
barStyle.background = color
} else {
barStyle.backgroundColor = color
}
return barStyle
})
const relativeStrokeWidth = computed(() =>
((props.strokeWidth / props.width) * 100).toFixed(1)