Color Gradient Picker Vue3

一个现代化的 Vue 3 颜色和渐变选择器组件，支持 TypeScript。

安装

``bash
npm install color-gradient-picker-vue3

或

yarn add color-gradient-picker-vue3

或

pnpm add color-gradient-picker-vue3
`

基本使用

`vue



`

API

$3

| 属性 | 类型 | 默认值 | 说明 |
| ------------------- | --------- | ----------------------- | -------------------- |
| value | string | 'rgba(175, 51, 242, 1)' | 当前颜色值 |
| width | number | 320 | 组件宽度(最小 320) |
| hideInputs | boolean | false | 是否隐藏输入框 |
| hideOpacity | boolean | false | 是否隐藏透明度控制 |
| hideGradient | boolean | false | 是否隐藏渐变功能 |
| presetColors | string[] | 预设颜色数组 | 预设颜色 |
| hidePresets | boolean | false | 是否隐藏预设颜色 |
| showAdvancedSliders | boolean | false | 是否显示高级滑块控制 |
| inputType | InputType | 'RGB' | 输入框类型 |

$3

| 事件名 | 参数 | 说明 |
| ------------ | ------ | ---------- |
| update:value | string | 颜色值更新 |
| change | IColor | 颜色变化 |

$3

`typescript
interface IColor {
mode?: 'solid' | 'gradient'
color?: string
angle?: number
degrees?: number
colors?: { color: string; offset: number }[]
gradientType?: string
gradientColors?: { color: string; left: number }[]
}

interface ColorPickerProps {
width: number
height?: number
gradientColorsIdx?: number
degrees?: number
degreesStr?: string
gradientColor?: string
value?: string
hideGradient?: boolean
showAdvancedSliders?: boolean
hideInputs?: boolean
hideOpacity?: boolean
hc?: IColorValue
isGradient?: boolean
inputType?: InputType
onChange?: (color: IColor) => void
mode?: IMode
gradientColors?: GradientProps[]
presetColors?: string[]
hidePresets?: boolean
}
`

高级用法

$3

`vue



`

$3

`vue



`

$3

`vue

`

工具函数

组件还提供了一些有用的工具函数：

`typescript
import {
createGradientStr,
isValidColor,
formatColor,
getColorContrast,
getColors,
formatInputValues,
round,
clamp,
percentToDecimal,
decimalToPercent,
} from 'color-gradient-picker-vue3'

// 验证颜色值
const isValid = isValidColor('#ff0000') // true

// 格式化颜色值
const formatted = formatColor('RGB(255, 0, 0)') // 'rgb(255, 0, 0)'

// 获取颜色对比度
const contrast = getColorContrast('#ffffff') // 1.0

// 限制数值范围
const clamped = clamp(150, 0, 100) // 100
`

开发

`bash

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

类型检查

npm run type-check

代码格式化

npm run format

代码检查

npm run lint
``

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！