u

src/modules/editor/components/CompUI/formItems/NewColorPicker/Panel.tsx

@@ -1,5 +1,5 @@
 import { Divider, Tabs } from "ant-design-vue";
-import { computed, defineComponent, reactive } from "vue";
+import { computed, defineComponent, reactive, watch } from "vue";
 import Picker from "./Picker";
 import ColorList, { formatColor, gradientColorType } from "./ColorList";
 import { css } from "@linaria/core";
@@ -46,16 +46,8 @@ const MutiColor = defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    let colors: string[] = [];
-    if (typeof props.value == "string") {
-      colors = [props.value, "#fff"];
-    } else {
-      // eslint-disable-next-line vue/no-setup-props-destructure
-      colors = props.value.colors;
-    }
-
     const state = reactive({
-      colors: colors,
+      colors: getColors(),
       gradientColors: computed(() => {
         const list: any = [
           { type: "linear", deg: 90 },
@@ -66,6 +58,22 @@ const MutiColor = defineComponent({
         return list.map((d: any) => ({ ...d, colors: state.colors }));
       }),
     });
+
+    function getColors() {
+      let colors: string[] = [];
+      if (typeof props.value == "string") {
+        colors = [props.value, "#fff"];
+      } else {
+        colors = props.value.colors;
+      }
+      return colors;
+    }
+
+    watch(
+      () => props.value,
+      () => (state.colors = getColors())
+    );
+
     return () => {
       return (
         <div>