Guides

Overview

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

Installation

npm i @mcistudio/vue-colorpicker

npm i @mcistudio/vue-colorpicker

How to Use

• Global Registration

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

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

• Local Registration

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

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

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

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

Props

Prop Name	Description	Type	Accepted Value	Default Value	Required
v-model	binding value	JSON	<v-model>		No
modebar	show mode bar	String	show none	show	No
size	button size	String	small medium large	medium	No

v-model

	Description	Type	Accepted Value	Default Value	Required
mode	color mode	String	solid linear radial	solid	No
color	rgba color value in solid mode	String	-	{ r: 0, g: 0, b: 0, a: 1 }	No
hex	Hex color value in solid mode (Read Only)	String	-	-	No
degree	drgee value in Linear-gradient mode	Number	-	90	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 color changes	returnValue

returnValue examples:

Solid Mode

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

{
    "mode": "solid",
    "color": {
        "r": 0,
        "g": 0,
        "b": 0,
        "a": 1
    },
  	"hex":'#000000',
    "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%)"
}

{
    "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%)"
}

{
    "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%)"
}