3.4 Browser -- useEyeDropper

最新推荐文章于 2024-09-30 15:42:36 发布

weixin_mouren

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量133

点赞数 2

分类专栏： vueuse源码解析文章标签：前端 javascript 数据库

本文链接：https://blog.csdn.net/weixin_44438233/article/details/141743040

版权

vueuse源码解析专栏收录该内容

29 篇文章 0 订阅

订阅专栏

3.4 Browser – useEyeDropperuseEyeDropper

https://vueuse.org/core/useEyeDropper/

作用

响应式EyeDropper API，网址：https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API

这个api可以让用户方便的取到网页中某一点的颜色。打开后会开启一个放大镜，点击后响应性地返回点击处的颜色。

官方示例

import { useEyeDropper } from '@vueuse/core'

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

源码分析

这个函数同样是了解api比代码本身更重要，代码比较简单。

export function useEyeDropper(options: UseEyeDropperOptions = {}) {
  const { initialValue = '' } = options
  const isSupported = useSupported(() => typeof window !== 'undefined' && 'EyeDropper' in window)
  const sRGBHex = ref(initialValue)

  async function open(openOptions?: EyeDropperOpenOptions) {
    if (!isSupported.value)
      return
    const eyeDropper: EyeDropper = new (window as any).EyeDropper()
    const result = await eyeDropper.open(openOptions)
    sRGBHex.value = result.sRGBHex
    return result
  }

  return { isSupported, sRGBHex, open }
}