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

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

@ -112,11 +112,19 @@ const props = defineProps(progressProps)
const ns = useNamespace('progress') const ns = useNamespace('progress')
const barStyle = computed<CSSProperties>(() => ({ const barStyle = computed<CSSProperties>(() => {
width: `${props.percentage}%`, const barStyle: CSSProperties = {
animationDuration: `${props.duration}s`, width: `${props.percentage}%`,
background: getCurrentColor(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(() => const relativeStrokeWidth = computed(() =>
((props.strokeWidth / props.width) * 100).toFixed(1) ((props.strokeWidth / props.width) * 100).toFixed(1)