ColorPicker
When To Use
When there is a color input, the color input box can provide a color input box and a color selector
Examples
Click on the color block to choose a color
<template>
<h-color-picker v-model:pure-color="shadowColor" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const shadowColor = ref('#cccccc');
</script>
API
Props
| Property | Description | Type | default |
|---|---|---|---|
| pureColor | color binding | string | rgb(0,0,0) |
| gradientColor | gradient binding | string | |
| colorType | select color type | enum | 'RGB' |
| activeKey | enum | pure | |
| isWidget | boolean | false | |
| pickerType | color Picker type | enum | fk |
| useType | enum | false | |
| disableHistory | Whether to disable history | boolean | false |
| roundHistory | boolean | false | |
| disableAlpha | Whether to disable transparent values | boolean | |
| closeBtnCorner | close button position | enum | TOP_RIGHT |
| position | selector position | Object |
Events
| Events Name | Description | Type | default |
|---|---|---|---|
| pureColorChange | Color change callback | Function | |
| gradientColorChange | Gradient color change callback | Function | |
| activeKeyChange | Color selection change callback | Function |