https://github.com/vrx-vue/color-picker-kit
HSV 风格颜色选择器快速成型工具
https://github.com/vrx-vue/color-picker-kit
color-picker vue vue-components vue3
Last synced: about 2 months ago
JSON representation
HSV 风格颜色选择器快速成型工具
- Host: GitHub
- URL: https://github.com/vrx-vue/color-picker-kit
- Owner: vrx-vue
- License: mit
- Created: 2024-05-02T18:55:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-06T16:09:24.000Z (11 months ago)
- Last Synced: 2025-09-19T00:22:45.908Z (3 months ago)
- Topics: color-picker, vue, vue-components, vue3
- Language: Vue
- Homepage: https://vrx-vue.github.io/color-picker-kit/
- Size: 808 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @vrx/color-picker-kit
[](https://npmjs.com/package/@vrx/color-picker-kit)
[](https://npm.chart.dev/@vrx/color-picker-kit)
[](https://bundlephobia.com/package/@vrx/color-picker-kit)
[](https://github.com/vrx-vue/color-picker-kit/blob/true/LICENSE)
HSV 风格颜色选择器快速成型工具
## 安装
```sh
# ✨ Auto-detect
npx nypm install @vrx/color-picker-kit
# npm
npm install @vrx/color-picker-kit
# yarn
yarn add @vrx/color-picker-kit
# pnpm
pnpm install @vrx/color-picker-kit
# bun
bun install @vrx/color-picker-kit
# deno
deno install @vrx/color-picker-kit
```
## 介绍
比起现成的功能丰富的 **HSV** 风格的 `` 组件。
`color-picker-kit` 只实现 **HSV** 风格拖拽调色部分组件,其余功能交给使用者自行组装。
**打个不恰当的比方：**
- 如果说 `` 组件 提供的是 ``
- **color-picker-kit** 提供的就是 ``/``/``/``
## 使用默认样式
```sh
# ✨ Auto-detect
npx nypm install @vrx/color-picker-kit-style
# npm
npm install @vrx/color-picker-kit-style
# yarn
yarn add @vrx/color-picker-kit-style
# pnpm
pnpm install @vrx/color-picker-kit-style
# bun
bun install @vrx/color-picker-kit-style
# deno
deno install @vrx/color-picker-kit-style
```
## 示例
```vue [index.vue]
// @noErrors
import { computed, ref, watch } from 'vue'
import {
ColorFormats,
HSVA,
HSVColorAlphaSlider,
HSVColorBlock,
HSVColorGradientSlider,
HSVColorPalette,
tinyColor,
} from '@vrx/color-picker-kit'
const props = withDefaults(
defineProps<{
/**
* 结果值格式化
*/
format?: ColorFormats
/**
* 默认值
*/
defaultValue?: string
/**
* 是否禁用
*/
disabled?: boolean
}>(),
{
format: 'hex',
defaultValue: '#43E97B',
disabled: false,
}
)
/**
* 双向绑定的值
*/
const modelValue = defineModel<string>()
const controlValue = computed(() => modelValue.value ?? props.defaultValue)
const hsvValue = computed(() => {
const v = tinyColor(controlValue.value, {
format: props.format,
}).toHsv()
return {
...v,
s: v.s * 100,
v: v.v * 100,
}
})
/**
* 由于 hex 转 hsv 会丢失部分信息，导致拖拽时，色盘闪烁
* 这边实现的不是完全的 双向绑定
*/
const color = ref<HSVA>({
h: hsvValue.value.h,
s: hsvValue.value.s,
v: hsvValue.value.v,
a: hsvValue.value.a,
})
const handleChange = (e: HSVA) => {
color.value = e
}
const formatValue = computed(() => {
return tinyColor(color.value).toString(props.format)
})
watch(formatValue, (v) => {
modelValue.value = v
})
```
```scss [index.scss]
@use '@vrx/color-picker-kit-style/scss/index.scss' as kit
with(
$vrx-color-picker-border: var(--vp-c-bg-alt),
$vrx-color-picker-dot: var(--vp-c-bg),
$vrx-color-picker-block-size: 40px
);
.#{kit.$prefix} {
width: 260px;
box-shadow: kit.$vrx-color-picker-shadow;
border-radius: kit.$vrx-color-picker-block-rounded;
.#{kit.$prefix}-palette {
height: 178px;
}
.#{kit.$prefix}-control-wrapper {
display: flex;
padding: 10px;
}
.#{kit.$prefix}-slider-group {
flex: 1;
min-width: 0;
margin-right: 10px;
}
.#{kit.$prefix}-hue-slider {
margin-bottom: 10px;
}
}
```
## 贡献者
Published under the [MIT](https://github.com/vrx-vue/color-picker-kit/blob/main/LICENSE) license.
Made by [@Colourlessglow](https://github.com/Colourlessglow) and [community](https://github.com/vrx-vue/color-picker-kit/graphs/contributors) 💛
---
_🤖 auto updated with [automd](https://automd.unjs.io)_