初始版本提交

src/components/ColorPicker/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import colorPicker from './src/ColorPicker.vue';
+
+export const ColorPicker = withInstall(colorPicker);

src/components/ColorPicker/src/ColorPicker.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <input
+      type="color"
+      :value="colorValue"
+      @change="handleChange"
+      :style="{ 'pointer-events': disabled ? 'none' : 'auto' }"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  const props = defineProps({
+    size: String,
+    value: String,
+    defaultValue: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const colorValue = ref('#ffffff');
+  const emit = defineEmits(['update:value', 'change']);
+  watch(
+    () => props.value,
+    (val) => {
+      colorValue.value = val || '#ffffff';
+    },
+    {
+      immediate: true,
+    },
+  );
+  watch(
+    () => props.defaultValue,
+    (val) => {
+      if (val) {
+        emit('update:value', val);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleChange = ({ target }) => {
+    emit('update:value', target.value);
+    emit('change', target.value);
+  };
+</script>