颜色选择器

安装

INFO

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

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

npm

npm install @havue/color-picker --save

yarn

yarn add @havue/color-picker

pnpm

pnpm install @havue/color-picker

引入

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

示例

颜色：

颜色编辑器

RGB

HSV

系统预设色彩

点我看代码

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

配置

属性名	说明	类型	默认值
model-value / v-model	绑定值	string	#ffffff
title	标题文字	string	颜色编辑器
presetTitle	预设标题	string	系统预设色彩
presetColors	预设颜色	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']