init

src/components/ColorPicker/index.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="color-picker flex flex-1">
+		<el-color-picker v-model="color" :predefine="predefineColors" />
+		<el-input v-model="color" class="mx-[10px] flex-1" type="text" readonly />
+		<el-button type="text" @click="reset">重置</el-button>
+	</div>
+</template>
+<script lang="ts" setup>
+const props = defineProps({
+	modelValue: {
+		type: String,
+	},
+	defaultColor: {
+		type: String,
+	},
+});
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: any): void;
+}>();
+
+const color = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+const predefineColors = ['#409EFF', '#28C76F', '#EA5455', '#FF9F43', '#01CFE8', '#4A5DFF'];
+const reset = () => {
+	color.value = props.defaultColor;
+};
+</script>