Color Picker

Installation

INFO

If other components are needed, please refer to Full Components Installation

To install the Color Picker individually, run the following command:

shell

npm install @havue/color-picker --save

shell

yarn add @havue/color-picker

shell

pnpm install @havue/color-picker

Import

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

Examples

ColorPicker/ColorPickerRainbow

Color：

Color picker

RGB

HSV

Preset colors

---

Click to view code

<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

Click to view code

<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>

ColorPicker Props

Property	Description	Type	Default
model-value / v-model	Bound value	string	#ffffff
disabled ^1.2.0	Disable interaction	boolean	_
title	Title text	string	Color picker
presetTitle	Preset title	string	Preset colors
presetColors	Preset colors	string[]	DEFAULT_PRESET_COLORS

ColorPickerNormal Props ^1.2.0

Property	Description	Type	Default
model-value / v-model	Bound value	string	#ffffff
disabled	Disable interaction	boolean	_
enableAlpha	Whether alpha prop can be set	boolean	true
presetTitle	Preset title	string	Preset colors
presetColors	Preset colors	string[]	DEFAULT_PRESET_COLORS

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