Color Picker

Installation

INFO

If other components are needed, please refer toFull Components Installation

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

npm

npm install @havue/color-picker --save

yarn

yarn add @havue/color-picker

pnpm

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

颜色：

颜色编辑器

RGB

HSV

系统预设色彩

Click to view code

<template>
  <div>颜色：<input type="color" v-model="color" /></div>
  <HvColorPicker v-model="color" :preset-colors="['#fff', '#000']"></HvColorPicker>
</template>

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

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

配置

Property	Description	Type	Default
model-value / v-model	Bound value	string	#ffffff
title	Title text	string	颜色编辑器
presetTitle	Preset title	string	系统预设色彩
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']