vue-color-kit
vue-color-kit
LiveDemo
Install
$ yarn add vue-color-kit
Example
<template>
<div :style="{background: color}">
<ColorPicker
theme="light"
:color="color"
:sucker-hide="false"
:sucker-canvas="suckerCanvas"
:sucker-area="suckerArea"
@changeColor="changeColor"
@openSucker="openSucker"
@inputFocus="inputFocus"
@inputBlur="inputBlur"
/>
</div>
</template>
<script>
import { ColorPicker } from 'vue-color-kit'
import 'vue-color-kit/dist/vue-color-kit.css'
export default {
components: {
ColorPicker,
},
data() {
return {
color: '#59c7f9',
suckerCanvas: null,
suckerArea: [],
isSucking: false,
}
},
methods: {
changeColor(color) {
const { r, g, b, a } = color.rgba
this.color = `rgba(${r}, ${g}, ${b}, ${a})`
},
openSucker(isOpen) {
if (isOpen) {
// ... canvas be created
// this.suckerCanvas = canvas
// this.suckerArea = [x1, y1, x2, y2]
} else {
// this.suckerCanvas && this.suckerCanvas.remove
}
},
inputFocus(event: FocusEvent) {
// this will get triggered on input field (hex and rgba) get focus
// prop value will be FocusEvent object associated with the input
},
inputBlur(event: FocusEvent) {
// this will get triggeredon input field (hex and rgba) get out of focus (blur event)
// prop value will be FocusEvent object associated with the input
},
},
}
</script>
Options
Name | Type | Default | Description |
---|---|---|---|
theme | String | dark |
dark or light |
color | String | #000000 |
rgba or hex |
colors-default | Array | ['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)'] |
like ['#ff00ff', '#0f0f0f', ...] |
colors-history-key | String | vue-color-kit-history |
|
sucker-hide | Boolean | true |
true or false |
sucker-canvas | HTMLCanvasElement | null |
like document.createElement('canvas') |
sucker-area | Array | [] |
like [x1, y1, x2, y2] |
color
is one-way data flow, so you can't usev-model
. why? because you'll listenchangeColor
event do more things, so i think it's not necessary here.
Events
Name | Type | Args | Description |
---|---|---|---|
changeColor | Function | color | { rgba: {}, hsv: {}, hex: ''} |
openSucker | Function | isOpen | true or false |
inputFocus | Function | Event | FocusEvent Object |
inputBlur | Function | Event | FocusEvent Object |
if you want use sucker, then
openSucker
,sucker-hide
,sucker-canvas
,sucker-area
is necessary. when you click sucker button, you can click it again or press key ofesc
to exit.
Dependencies
@microsoft/api-extractor: 7.8.1@rollup/plugin-alias: ^3.1.1@rollup/plugin-commonjs: ^18.1.0@rollup/plugin-node-resolve: ^11.2.1@rollup/plugin-replace: ^2.3.4@size-limit/preset-small-lib: ^4.7.0@types/jest: ^26.0.15@types/jsdom: ^16.2.5@vitejs/plugin-vue: ^1.0.4@vue/cli-service: ^4.5.6@vue/compiler-sfc: ^3.0.5@vue/test-utils: ^2.0.0-beta.6autoprefixer: ^10.0.2codecov: ^3.8.1conventional-changelog-cli: ^2.1.1cross-env: ^7.0.2jest: ^26.5.3lint-staged: ^10.5.1mini-css-extract-plugin: ^1.6.0pascalcase: ^1.0.0prettier: ^2.1.2prismjs: ^1.22.0rollup: ^2.33.3rollup-plugin-postcss: ^3.1.8rollup-plugin-scss: ^2.6.1rollup-plugin-terser: ^7.0.2rollup-plugin-typescript2: ^0.29.0rollup-plugin-vue: ^6.0.0-beta.10sass: ^1.29.0sass-loader: ^10.1.0size-limit: ^4.7.0ts-jest: ^26.4.1typescript: ^4.1.2vite: ^2.0.0-beta.12vue: ^3.0.5yorkie: ^2.0.0