A Vue3.x based color picker component

by Vue.js Examples

a Vue3.x based color picker component.

English | 中文

Features

  • Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient.
  • Supports color opacity(alpha) adjustment.
  • Supports gradient bar control, easily drag/add/delete the control points.
  • The EyeDropper can quickly pick any color from your screen. （supports Google Chrome version 95+）
  • Supports live preview.

Screenshot

demo.mov

Installation

npm i @mcistudio/vue-colorpicker

How to Use

Global Registration

main.js

import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/style.css'
createApp(App)
  .use(router)
  .use(ColorPicker)
  .mount("#app");
OR

Local Registration

HelloWorld.vue

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'

<template>
  <ColorPicker></ColorPicker>
</template>

</script>

demo

HelloWorld.vue

<template>
  <ColorPicker mode="mode" :degree="degree" :gradients="grad" @colorChanged="triggerChanged" />
</template>

<script setup>
import ColorPicker from '@mcisutdio/vue-colorpicker'
import '@mcisutdio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const mode = ref('linear')
const degree = ref(90)
const grad = ref([
  { id: 0, percent: 10, color: { r: 255, g: 10, b: 20, a: 1 } },
  { id: 1, percent: 100, color: { r: 59, g: 50, b: 240, a: 1 } },
])
function triggerChanged(color) {
  console.log('current color:', color)
}
</script>

Props

Prop Name Description Type Accepted Value Default Value Required
mode color mode String solidlinearradial solid No
degree drgee value in Linear-gradient mode Number – 90 No
color rgba color value in solid mode String – { r: 0, g: 0, b: 0, a: 1 } No
gradients gradient list JSON Array – [ { percent: 0, color: { r: 255, g: 255, b: 255, a: 1 } } { percent: 100, color: { r: 0, g: 0, b: 0, a: 1 } }] No

Events

event Name Description Parameters
colorChanged triggered when the color is changed returnValue
returnValue examples:

Solid Mode

{
    "mode": "solid",
    "color": {
        "r": 0,
        "g": 0,
        "b": 0,
        "a": 1
    },
    "css": "background-color:rgba(0,0,0,1)"
}

Linear Mode

{
    "mode": "linear",
    "degree": 90,
    "color": [
        {
            "percent": 0,
            "color": {
                "r": 255,
                "g": 255,
                "b": 255,
                "a": 1
            }
        },
        {
            "percent": 100,
            "color": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 1
            }
        }
    ],
    "css": "background-image:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%)"
}

Radial Mode

{
    "mode": "radial",
    "color": [
        {
            "percent": 0,
            "color": {
                "r": 255,
                "g": 255,
                "b": 255,
                "a": 1
            }
        },
        {
            "percent": 100,
            "color": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 1
            }
        }
    ],
    "css": "background-image:radial-gradient(rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%)"
}

GitHub

View Github