When I use EyeDropper API throw error 'EyeDropper' is not defined-CodePudding

I need to use EyeDropper to complete a eyedropper. My project use Vue2 Ts, my code:

<div
  v-if="haveEyeDropper"
  @click="handleClickPick"
>
  <i ></i>
</div>

handleClickPick(): void {
  const eyeDropper = new EyeDropper();
  // ...
}

I receive Errors "Cannot find name 'EyeDropper'. Did you mean 'eyeDropper'? -Vetur" and "'EyeDropper' is not defined -eslint" But I copy MDN-document(https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) example code in a index.html, it works.

(My Browser is Chrome edition 105.0.5195.52)

CodePudding user response：

I came up with a feasible plan, but it is not very standard.

I added the following code to index.html:

<script>
  if (!!window.EyeDropper) {
    window.EyeDropperTarget = new EyeDropper();
  }
</script>

I check window.EyeDropper, if have it, I mount new EyeDropper() example on window.

Then I can use it in business code:

handleClickPick(): void {
  const picker = window.EyeDropperTarget;

  picker.open().then((result: any) => {
    const color = result?.sRGBHex;
    // ...
  });
}

CodePudding user response：

My leader gave me a standard method with the folloing code：

new example = (window as any).EyeDropper()

Vetur reports the error because: Esline unrecognized window new Api.