Vue2+TS项目使用EyeDropper API报错“EyeDropper未定义”求助

问题原因 #

Chrome 105已支持EyeDropper API，但TypeScript默认类型定义未包含该API，同时ESLint未将其识别为全局变量，因此出现编辑器报错，但浏览器运行正常。

解决步骤 #

1. 为TypeScript添加EyeDropper类型声明 #

在项目src目录下创建（或修改）全局类型声明文件，比如src/types/global.d.ts，添加以下内容：

interface EyeDropper {
  open(): Promise<{ sRGBHex: string }>;
}

declare global {
  interface Window {
    EyeDropper: typeof EyeDropper;
  }
}

export {};

添加后TypeScript即可识别EyeDropper类型，不再提示“Cannot find name 'EyeDropper'”。

2. 配置ESLint允许全局变量EyeDropper #

打开ESLint配置文件（通常是.eslintrc.js或.eslintrc.json），在globals字段中添加EyeDropper并设为只读：

// .eslintrc.js示例
module.exports = {
  // 其他配置项...
  globals: {
    EyeDropper: 'readonly'
  }
}

此操作可消除ESLint的“'EyeDropper' is not defined”提示。

3. 完善浏览器兼容性判断 #

确保haveEyeDropper的判断逻辑准确，避免非浏览器环境报错，可在组件的computed中定义：

computed: {
  haveEyeDropper(): boolean {
    return typeof window !== 'undefined' && 'EyeDropper' in window;
  }
}

4. 完善取色逻辑（可选） #

调整handleClickPick方法，处理取色结果与异常：

async handleClickPick(): Promise<void> {
  try {
    const eyeDropper = new window.EyeDropper();
    const result = await eyeDropper.open();
    // 处理取到的颜色值result.sRGBHex
    console.log('取到的颜色:', result.sRGBHex);
  } catch (err) {
    // 用户取消取色或异常处理
    console.log('取色取消或失败:', err);
  }
}

内容的提问来源于stack exchange，提问作者XiaoMan