From 30a6d3b7a3d112e459ce1c1676e60c4a1344d172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=98=E9=9A=8F=E9=A3=8E=E6=9F=93?=
 <83899365+SKSQ2529720581@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:59:46 +0800
Subject: [PATCH] fix(components): [color-picker] supports dynamic change of
 colorFormat (#18135)

* feat(components): [color-picker] supports dynamic change of colorFormat

* test(components): [color-picker] test cases with fixes added
---
 .../__tests__/color-picker.test.tsx           | 21 +++++++++++++++++++
 .../color-picker/src/color-picker.vue         | 11 ++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/components/color-picker/__tests__/color-picker.test.tsx b/packages/components/color-picker/__tests__/color-picker.test.tsx
index c3a3917b2a..3464f423f4 100644
--- a/packages/components/color-picker/__tests__/color-picker.test.tsx
+++ b/packages/components/color-picker/__tests__/color-picker.test.tsx
@@ -498,4 +498,25 @@ describe('Color-picker', () => {
     expect(blurHandler).toHaveBeenCalled()
     wrapper.unmount()
   })
+
+  it('when colorFormat prop changes, the color format and v-model binding values should be updated', async () => {
+    const color = ref('#00FF00')
+    const colorFormat = ref('hex')
+    const wrapper = mount(() => (
+      <ColorPicker v-model={color.value} color-format={colorFormat.value} />
+    ))
+
+    colorFormat.value = 'rgb'
+    await nextTick()
+    const colorPickerWrapper = wrapper.findComponent(ColorPicker)
+    const customInput = colorPickerWrapper.findComponent({
+      ref: 'inputRef',
+    })
+    expect(colorPickerWrapper.vm.color.format).toBe('rgb')
+    expect(color.value).toBe('rgb(0, 255, 0)')
+    expect(
+      customInput.find<HTMLInputElement>('.el-input__inner').element.value
+    ).toBe('rgb(0, 255, 0)')
+    wrapper.unmount()
+  })
 })
diff --git a/packages/components/color-picker/src/color-picker.vue b/packages/components/color-picker/src/color-picker.vue
index b08c090ed8..e59d356a00 100644
--- a/packages/components/color-picker/src/color-picker.vue
+++ b/packages/components/color-picker/src/color-picker.vue
@@ -363,6 +363,17 @@ watch(
   }
 )
 
+watch(
+  () => props.colorFormat,
+  () => {
+    if (props.colorFormat) {
+      color.format = props.colorFormat
+      color.doOnChange()
+      emit(UPDATE_MODEL_EVENT, color.value)
+    }
+  }
+)
+
 watch(
   () => currentColor.value,
   (val) => {