Vue 取色器可以通过VueUse的useEyeDropper实现

Vue 取色器可以通过VueUse的useEyeDropper实现,它是EyeDropper API的响应式封装。

代码示例

isSupported浏览器是否支持取色器
open打开取色器
sRGBHex取到的颜色值

import { useEyeDropper } from '@vueuse/core'

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

组件示例

导入UseEyeDropper取色器组件，如果没安装需要先安装

npm i @vueuse/core @vueuse/components

<UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
  <button :disabled="!isSupported" @click="open">
    sRGBHex: {{ sRGBHex }}
  </button>
</UseEyeDropper>
<script setup>  
 //导入组件
 import { UseEyeDropper } from '@vueuse/components'
</script>

在线例子

例子