EyeDropper 取色器

EyeDropper 允许用户从屏幕中选择颜色

基础用法

通过 onChange 监听颜色选择, 通常搭配 v-slot 插槽暴露的方法使用

<template>
  <px-eye-dropper v-slot="{ open, sRGBHex }">
    <px-badge
      is-dot
      :color="sRGBHex || 'black'"
      :style="{ '--px-badge-size': '50px' }"
    >
      <px-button @click="open">
        <px-text :color="sRGBHex || 'black'">{{ sRGBHex || 'black' }}</px-text>
      </px-button>
    </px-badge>
  </px-eye-dropper>
</template>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

EyeDropper API

Props

Name	Description	Type	Default
initialValue	选中的初始颜色值	string	-

Events

Name	Description	Type
change	当颜色值改变时触发	function

Slots

Name	Description
default	默认插槽, 暴露 open、sRGBHex 给使用者

Expose

Name	Description	Type
open	打开 EyeDropper	function
sRGBHex	当前选中的颜色值	string

/**
 * EyeDropper 支持的 open 方法参数
 */
export interface EyeDropperOpenOptions {
  /**
   * @property signal
   * @description 可选的 AbortSignal, 用于中止操作
   * @type AbortSignal
   * @default undefined
   */
  signal?: AbortSignal
}

/**
 * EyeDropper open 方法返回值
 */
export interface EyeDropperResult {
  /**
   * @property sRGBHex
   * @description 返回的选中颜色值（十六进制）
   * @type string
   */
  sRGBHex: string
}