From 610df13065375dcb3f238aff38c1a1449a16d096 Mon Sep 17 00:00:00 2001
From: jujijigo <jujijigo@gmail.com>
Date: Thu, 18 Jan 2024 14:12:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0ma-color-picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ma-colorPicker/index.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/ma-colorPicker/index.vue b/src/components/ma-colorPicker/index.vue
index 3937a860..a190706a 100644
--- a/src/components/ma-colorPicker/index.vue
+++ b/src/components/ma-colorPicker/index.vue
@@ -21,22 +21,28 @@
   </a-input-group>
 </template>
 <script setup>
-import { ref, watch, reactive, onMounted } from 'vue'
+import { reactive, computed } from 'vue'
 import { ColorPicker } from 'vue-color-kit'
 import 'vue-color-kit/dist/vue-color-kit.css'
-import { generate, getRgbStr } from '@arco-design/color'
 import useClipboard from 'vue-clipboard3'
 import { Message } from '@arco-design/web-vue'
 
-const val = ref()
 const props = defineProps({
   modelValue: String,
   placeholder: { type: String, default: '请选择颜色' },
 })
 
-onMounted(() => {
-  val.value = props.modelValue
-})
+const emit = defineEmits(['update:modelValue'])
+
+const val = computed({
+    get() {
+      return props.modelValue
+    },
+    set(newVal) {
+      emit('update:modelValue', newVal)
+    }
+  }
+)
 
 const selectColor = (color) => {
   val.value = color.hex
@@ -57,10 +63,4 @@ const defaultColorList = reactive([
   '#86909c', '#6d4c41',
 ])
 
-const emit = defineEmits(['update:modelValue'])
-
-watch(
-  () => val.value,
-  vl => emit('update:modelValue', vl)
-)
 </script>
\ No newline at end of file