html,vuejs实现颜色选择器和取色器

兼容原生html和vue等框架，不支持小程序，两种模式：1. 直接鼠标取色 2.颜色选择器面板+取色器

代码如下:(这里demo以 vue3 的形式展示，可更具不同语法自有调整)

<template>
<button style="margin-left: 1em; border: 1px solid #444;padding: 0.3em;" v-if="hasEyeDrop" @click="nativePick">点击吸色</button>
<div v-else ><input type="color" @input="nativePick" /> <span style="font-size: 12px;color:#999;">（点击色块吸色）</span></div>

</template>

// js代码
const hasEyeDrop = 'EyeDropper' in window; // 是否支持原生取色器
const nativePick = async (e) =>{
const val = e ? e.target.value : null
if (val) {
// console.log('input获得颜色1: ',val ,e)
} else {
const eyeDropper = new window.EyeDropper() // 初始化一个EyeDropper对象
console.log('按Esc可退出')
try {
const result = await eyeDropper.open() // 开始拾取颜色
// console.log('按钮获得颜色2: ', result.sRGBHex, result)
} catch (e) {
console.log('用户取消了取色')
}
}
}