Nuxt Color Picker

一个模块，添加了一个方便、可定制的 ColorPicker 组件，用于在您的应用程序中选择颜色。

此模块仅适用于 Nuxt 3

特性

易于连接
完全组件自定义
两种用例（作为颜色选择器和颜色选择器块）
取色器支持
颜色选择历史
初始颜色显示
Alpha 范围可用性

用法

安装模块

npm install nuxt-color-picker

配置

export default defineNuxtConfig({
  modules: ["nuxt-color-picker"]
})

组件

ColorPicker

该组件是任何 html 块的包装器，用于实现其自己的 ColorPicker 菜单 раскрытие 按钮。

type Props = {
  modelValue?: string;
  storageKey?: string;
  withAlpha?: boolean;
  withInitialColor?: boolean;
  withEyeDropper?: boolean;
  withHexInput?: boolean;
  withRgbInput?: boolean;
  withColorsHistory?: boolean | number;
  immediateEmit?: boolean;
};
type Emits = {
  (e: 'update:modelValue', v: string): void;
  (e: 'change', v: ModuleColorMultiType): void;
  (e: 'close'): void;
};
type Slot = {
  color: Ref<string | undefined>;
  hide: () => void;
  show: (event: MouseEvent) => void;
};

<script lang="ts" setup>
  const refVariable = ref('#000');
</script>

<template>
  <color-picker
    v-model="refVariable"
    v-slot="{ color, show }"
    @change="console.log('New color:', $event)"
    @close="console.log('ColorPicker is closed')"
  >
    Current color: {{ color }}
    <button @click="show">OPEN</button>
  </color-picker>
</template>

ColorPickerBlock

该组件是 Color Picker 的主块。它始终打开，可以作为块集成到应用程序的任何位置。

type Props = {
  modelValue?: string;
  storageKey?: string;
  withAlpha?: boolean;
  withInitialColor?: boolean;
  withEyeDropper?: boolean;
  withHexInput?: boolean;
  withRgbInput?: boolean;
  withColorsHistory?: boolean | number;
  immediateEmit?: boolean;
};
type Emits = {
  (e: 'update:modelValue', v: string): void;
  (e: 'change', v: ModuleColorMultiType): void;
};

<script lang="ts" setup>
  const refVariable = ref('#000');
</script>

<template>
  Current color: {{ refVariable }}
  <color-picker-block
    v-model="refVariable"
    @change="console.log('New color:', $event)"
  />
</template>

组件配置

属性

名称	类型	默认值	描述
modelValue	string	#000000	添加双向通信的 v-model 变量
storageKey	string	history	存储中用于保存颜色历史记录的修饰符键
withAlpha	boolean	false	它包括一个 alpha 光谱块以及使用颜色 alpha 范围的能力
withInitialColor	boolean	false	启用初始颜色的显示，该初始颜色是最初打开块时使用的颜色，并具有回滚的可能性
withEyeDropper	boolean	false	包含取色器块（如果支持），允许您使用颜色复制
withHexInput	boolean	false	包含一个手动输入十六进制值颜色的块。当启用 WithAlpha 时，将添加 alpha 范围
withRgbInput	boolean	false	包含一个手动输入 rgb 颜色值的块。当启用 WithAlpha 时，将添加 alpha 范围
withColorsHistory	boolean \| number	false	包含颜色历史记录块。指定一个数字 - 设置要显示的颜色 `number` 数量 (1<=n<=9)。指定 `true` 设置最大可能的颜色数量。当关闭 withAlpha 时，最大颜色数为 8
immediateEmit	boolean	false	启用在挂载组件时调用颜色更改事件

事件

名称	类型	描述
update:modelValue	string	用于更新值的 v-model 系统事件
change	ModuleColorMultiType	在颜色更改时调用，并返回 rgba、hsv 和十六进制值的新颜色
close	void	在 ColorPicker 窗口关闭时调用

插槽

名称	类型	描述
color	Ref<string \| undefined>	当前、选定的、响应式颜色
hide	() => void	关闭 ColorPicker 窗口的函数
show	(event: MouseEvent) => void	打开 ColorPicker 窗口的函数（需要 MouseEvent 来计算窗口的位置）

类型

type ModuleRGB = {
  r: number;
  g: number;
  b: number;
};
type ModuleRGBA = ModuleRGB & {
  a: number;
};
type ModuleHSV = {
  h: number;
  s: number;
  v: number;
};
type ModuleHEX = string;

type ModuleColorMultiType = {
  rgba: ModuleRGBA;
  hsv: ModuleHSV;
  hex: ModuleHEX;
};

配置示例


配置	基础	完整	仅 HEX 和 4 种颜色
属性		with-alpha with-initial-color with-eye-dropper with-hex-input with-rgb-input with-colors-history	with-hex-input :with-colors-history="4"

配置	仅 alpha	RGBA 和初始颜色	全部不带 alpha
属性	with-alpha	with-alpha with-initial-color with-rgb-input	with-initial-color with-eye-dropper with-hex-input with-rgb-input with-colors-history