A Lightweight Color Picker For Vue 3

Hello friends, in this post today we cover another GitHub repository Lightweight Color Picker in the vue3 javascript frontend framework.

Vue-Color Kit:

preview-dark
preview-light
Vue3 Color Picker

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"
    />
  </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
        }
      },
    },
  }
</script>

Options:

NameTypeDefaultDescription
themeStringdarkdark or light
colorString#000000rgba or hex
colors-defaultArray['#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-keyStringvue-color-kit-history
sucker-hideBooleantruetrue or false
sucker-canvasHTMLCanvasElementnulllike document.createElement('canvas')
sucker-areaArray[]like [x1, y1, x2, y2]
Options Of Color Picker

color is one-way data flow, so you can’t use it. why? because you’ll listen changeColor event do more things, so I think it’s not necessary here.

Events:

NameTypeArgsDescription
changeColorFunctioncolor{ rgba: {}, hsv: {}, hex: ''}
openSuckerFunctionisOpentrue or false
Events Of Color Picker

if you want use sucker, then openSuckersucker-hidesucker-canvassucker-area is necessary. when you click sucker button, you can click it again or press key of esc to exit.

Demo:

Vue 3 Js Color Picker

Github:

Vue 3 Js GitHub

Please share and comment on this repository if you find any helpful and wants to improve WhatsApp us.

Share Your Love
Default image
Lingaraj Senapati
Hey There! I am Lingaraj Senapati, the Co-founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.
Articles: 136

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply