1.使用vueuse中的useEyeDropper來實現滴管的功能和使用input中的type="color"屬性來實現顏色盤

?效果：

圖標觸發吸管

input觸發顏色盤
?

組件代碼部分 ：<dropper>? ----? vueuse使用

<template><div class="sRGBHexWrap fbc"><span class="iconStyle fec" @click="handleOpen"><el-icon :size="20"><EditPen /></el-icon></span><span class="colorSpan"><input type="color" :value="defaultValue" @input="updateColor" class="color" v-if="showInput" /></span></div>
</template><script setup>import { useEyeDropper } from '@vueuse/core'
const { open, sRGBHex } = useEyeDropper()
// 引入 Vue 相關的 API
import { ref, watch, onMounted } from "vue";// 定義組件的 props 和 emits
const props = defineProps(['modelValue'])
const emit = defineEmits(["update:modelValue"]);
//默認顏色顯示
let defaultValue = '#4EAF31' //默認展示的顏色，使用ref無法觸發初始化顯示
let showInput = ref(true)   //因為defaultValue不是ref所以需要手動刷新dom
let Value = ref(null) //派發的顏色//獲取顏色盤的顏色
const getColor = (newValue) => {showInput.value = falsedefaultValue = newValueValue.value = newValue;showInput.value = true
};//監聽接受的值然后進行復制
watch(() => props.modelValue, async (newValue) => {if (newValue) {getColor(newValue)}
}, { immediate: true })//監聽滴管顏色
watch(sRGBHex, async (newmodelValue) => {if (newmodelValue) {getColor(newmodelValue)}
})//監聽值的變化
watch(Value, async (newValue) => {if (newValue) {emit("update:modelValue", newValue);}
})//獲取顏色盤的顏色
const updateColor = (event) => {Value.value = event.target.value;
};//處理打開滴管時候按Esc按鈕報錯
const handleOpen = () => {try {open();} catch (error) {console.error('Error while opening EyeDropper:', error);}
};</script><style lang="scss" scoped>
.color {background: var(--background-color2);outline: none;box-shadow: none;border: none;
}.sRGBHexWrap {width: 100%;height: 100%;/* background-color: aliceblue; */}.iconStyle {width: 100%;height: 100%;padding: 0px 10px;cursor: pointer;
}.colorSpan {cursor: pointer;width: 50%;height: 50%;border-radius: 5px;
}input {padding: 0px;margin: 0px;
}
</style>

使用組件<dropper>

<dropper v-model="VRColor"></dropper>

?

?