fix(Color-Picker): 修复最近使用颜色异常 (#3515)

Tencent · Oct 24, 2023 · 1e4ed75 · 1e4ed75
1 parent 6a00f49
commit 1e4ed75
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/color-picker/color-picker-panel.tsx b/src/color-picker/color-picker-panel.tsx
@@ -1,7 +1,8 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import props from './props';
 import ColorPanel from './panel';
 import { usePrefixClass } from '../hooks/useConfig';
+import pickBy from 'lodash/pickBy';
 
 export default defineComponent({
   name: 'TColorPickerPanel',
@@ -10,9 +11,10 @@ export default defineComponent({
     ...props,
   },
   setup(props, { attrs }) {
+    const newProps = computed(() => pickBy({ ...props, ...attrs }, (v) => v !== undefined));
     const prefix = usePrefixClass();
     return () => (
-      <ColorPanel {...{ ...props, ...attrs }} popupProps={null} close-btn={false} class={`${prefix.value}-is-inline`} />
+      <ColorPanel {...newProps.value} popupProps={null} close-btn={false} class={`${prefix.value}-is-inline`} />
     );
   },
 });
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
@@ -20,6 +20,7 @@ import { TdColorModes } from '../interfaces';
 import { useBaseClassName } from '../hooks';
 import useVModel from '../../hooks/useVModel';
 import useDefaultValue from '../../hooks/useDefaultValue';
+import cloneDeep from 'lodash/cloneDeep';
 
 export default defineComponent({
   name: 'ColorPanel',
@@ -71,7 +72,7 @@ export default defineComponent({
       if (recentlyUsedColors.value === null || recentlyUsedColors.value === false) {
         return;
       }
-      const colors = (recentlyUsedColors.value as string[]) || [];
+      const colors = cloneDeep(recentlyUsedColors.value as string[]) || [];
       const currentColor = color.value.isGradient ? color.value.linearGradient : color.value.rgba;
       const index = colors.indexOf(currentColor);
       if (index > -1) {
@@ -89,7 +90,6 @@ export default defineComponent({
      * @param colors
      */
     const handleRecentlyUsedColorsChange = (colors: string[]) => {
-      recentlyUsedColors.value = colors;
       setRecentlyUsedColors(colors);
     };