颜色选择器

安装

INFO

如果还需要使用其他组件，请参考全量组件安装

如果仅需要使用颜色选择器，执行以下命令单独安装:

shell

npm install @havue/color-picker --save

shell

yarn add @havue/color-picker

shell

pnpm install @havue/color-picker

引入

<script>
import { HvColorPicker } from 'havue'
// or 
import { HvColorPicker } from '@havue/components'
// or
import { HvColorPicker } from '@havue/color-picker'
</script>

示例

ColorPicker/ColorPickerRainbow

Color：

Color picker

RGB

HSV

Preset colors

---

点我看代码

<template>
  <div class="color-picker-demo">
    <h3>ColorPicker/ColorPickerRainbow</h3>
    <div>Color：<input type="color" v-model="color" /></div>
    <HvColorPicker v-model="color" :preset-colors="['#fff', '#000']"></HvColorPicker>
    <hr />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { HvColorPicker } from '@havue/components'

const color = ref('#ffffff')
</script>

<style lang="scss"></style>

ColorPickerNormal

Color：

• RGB
• HSL
• HSV

No data

%

Reset colors

点我看代码

<template>
  <div class="color-picker-demo">
    <h3>ColorPickerNormal</h3>
    <div>Color：<input type="color" v-model="inputColor" /></div>
    <HvColorPickerNormal v-model="color"></HvColorPickerNormal>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { HvColorPickerNormal } from '@havue/components'

const inputColor = ref('#ffffff')
const color = ref('#ffffff')

watch(inputColor, (val) => {
  color.value = val
})

watch(color, (val) => {
  inputColor.value = val.substring(0, 7)
})
</script>

<style lang="scss">
// 重置文档默认样式，避免影响el-select的样式。
// Reset the document's default styles to avoid affecting el-select's styles.
.color-picker-demo {
  ul {
    padding: 0;
    margin: 0;
  }
}
</style>

组件说明

• HvColorPicker（彩虹条）：色相条 + 亮度/饱和度区域，适合快速选色。
• HvColorPickerNormal ^1.2.0：色相条 + 饱和度/明度 + 可选透明度，适合需要精确透明度的场景。

ColorPicker 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值	string	#ffffff
disabled ^1.2.0	是否禁用	boolean	—
title	标题文字	string	Color picker
presetTitle	预设标题	string	Preset colors
presetColors	预设颜色	string[]	DEFAULT_PRESET_COLORS

ColorPickerNormal 属性 ^1.2.0

属性名	说明	类型	默认值
model-value / v-model	绑定值	string	#ffffff
disabled	是否禁用	boolean	—
enableAlpha	是否可设置透明度	boolean	true
presetTitle	预设标题	string	Preset colors
presetColors	预设颜色	string[]	DEFAULT_PRESET_COLORS

事件

两个组件均通过 v-model 双向绑定，会触发 update:model-value，值为当前颜色 hex 字符串。

预设颜色常量

可通过 presetColors 覆盖默认预设；默认值为：

const DEFAULT_PRESET_COLORS = ['#000000','#FFFFFF','#E3822D','#DCE24F','#1DCF69','#6DE5B9','#11A1F2','#AA43FF','#F0689C','#F8D28B','#606368','#E83C34','#EEBE29','#89F0AC','#2FBC9E','#56CCF2','#1C1DFA','#DC88F5','#D4C595','#C52F65']