From 9da8eb00afec2a45c15687b05b59b4335d6a7baa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Thu, 15 Aug 2024 09:44:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=83=8C=E6=99=AF=E8=89=B2?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=9B=B4=E6=96=B0=E6=98=BE=E7=A4=BA=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/mult-color-picker/index.vue | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/common/mult-color-picker/index.vue b/src/components/common/mult-color-picker/index.vue index e9d1a943..a35155cb 100644 --- a/src/components/common/mult-color-picker/index.vue +++ b/src/components/common/mult-color-picker/index.vue @@ -47,42 +47,42 @@ const props = defineProps({ }); const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']); const direction_type = ref(props.type); -let color_list = reactive( - //将数组['#fff']改为对象数组 - props.value.map((item: any) => { +let state = reactive({ + color_list: props.value.map((item: any) => { return { color: item.color, color_percentage: item.color_percentage, }; }) -); +}); +const { color_list } = toRefs(state); const emit = defineEmits(['update:value']); const direction_type_change = (type: any) => { direction_type.value = type.toString(); update_value(); }; const reset_event = () => { - color_list = [{ color: '', color_percentage: '' }]; + color_list.value = [{ color: '', color_percentage: '' }]; update_value(); }; const del_event = (index: number) => { - color_list.splice(index, 1); + color_list.value.splice(index, 1); update_value(); }; const add_event = () => { - color_list.push({ color: '', color_percentage: '' }); + color_list.value.push({ color: '', color_percentage: '' }); update_value(); }; const change_color = (index: number, color: string | null) => { - color_list[index].color = color; + color_list.value[index].color = color; update_value(); }; const change_color_percentage = (index: number, percentage: string | null) => { - color_list[index].color_percentage = percentage; + color_list.value[index].color_percentage = percentage; update_value(); }; const update_value = () => { - emit('update:value', color_list, direction_type.value); + emit('update:value', color_list.value, direction_type.value); };