Vue3中的工具取色器

一、开发场景

最近开发过程中，碰到需要给小程序根据banner动态导入背景色，后台需要配置推荐位的banner背景色的需求

使用到了Arco-Design的ColorPicker组件发现没有取色器的功能，可能是因为刚更新的组件还没有完善，看到了github其他开发者提的issues也有反馈，然后就自己去加一下这个功能
（其实<input type="color">也可以完成功能，只是体验感不好，传送门）

二、开始体验

首先验证EyeDropper API是否可用

if ('EyeDropper' in window) {
  console.log('支持！');
} else {
  console.log('当前浏览器不支持！');
}

然后发现控制台输出的是当前浏览器不支持！

import { useEyeDropper, useClipboard } from '@vueuse/core';
const { open, sRGBHex, isSupported } = useEyeDropper();

Vue3使用@vueuse/core，isSupported返回的也是false
然后就懵逼了为啥会这样，vueuse官网上面可以用的，查一下资料才知道只能https生效

然后就本地环境模拟一下https再试试吧
配置vite.config.ts文件

先生成签名文件，如何生成看这里【Vite】配置HTTPS自签名证书

import { mergeConfig } from 'vite';
import fs from 'fs';

export default mergeConfig(
  {
    mode: 'development',
    server: {
      // ...
      https: {
        key: fs.readFileSync('keys/agent2-key.pem'),
        cert: fs.readFileSync('keys/agent2-cert.pem'),
      },
      // ...
    },
  },
);

这样就可以完成基本配置了，本地模拟成https，isSupported也返回true了

三、开发

<a-color-picker
  v-model="formState.color"
  show-text
  :disabled-alpha="false"
></a-color-picker>
<a-button class="ml-10" shape="circle" @click="getColor">
  <SvgIcon icon-class="straw" />
</a-button>

const { open, sRGBHex, isSupported } = useEyeDropper();

const getColor = () => {
 if (!isSupported.value) {
   Message.warning('该浏览器暂不支持吸管功能!');
   return;
 }
 open();
};

watch(
  () => sRGBHex.value,
  (newColor) => {
    formState.value.color = newColor;
  }
);