Color Picker base on Vue2.x

阿多

Last update: Nov 15, 2020

Related tags

Color Picker vue-color-picker

Overview

Vue Color Picker

Color Picker base on Vue2.x

Take a glance

Online Demo

Installation

npm i -S @duoa/vue-color-picker

Usage

import Vue from 'vue'
import VueColorPicker from '@duoa/vue-color-picker'
// Because this components has its styles, you must also import the css file.
import '@duoa/vue-color-picker/dist/vue-color-picker.css'

// Register
Vue.use(VueColorPicker)

Declare the component

<template>
  <vue-color-picker v-model="color" />
template>
<script>
export default {
  data () {
    return {
      color: '#ff00ff'
    }
  }
}
script>

That's all you need to do!

If you want to customize the component name. Here is an example.

import Vue from 'vue'
import { component } from '@duoa/vue-color-picker'
import '@duoa/vue-color-picker/dist/vue-color-picker.css'

// Register
Vue.component('MyColorPicker', component)

Configuration

Name	Type	Default Value	Required	Description
value / v-model	string	''	--	binding value
colorFormat	string	hex (when show-alpha is false)/ rgb (when show-alpha is true)	--	color format of v-model, `hsl` / `hsv` / `hex` / `rgb` is accepted
showAlpha	boolean	false	--	whether to display the alpha slider
disabled	boolean	false	--	whether to disable the picker
appendToBody	boolean	false	--	whether to append picker popup itself to body. A nested picker popup should have this attribute set to `true`
predefine	array	[]	--	predefined color options
stop	boolean	false	--	stopPropagation when mousedown or click on popup
prevent	boolean	false	--	preventDefault when mousedown or click on popup

Events

Event Name	Description	Parameters
before-open	triggers before the picker opens	--
change	triggers when the selected color changes	current selected color
close	triggers when the picker closes	--

You might also like...

Color picker for vue using Tailwind v2

Vue Tailwind Color Picker Color picker for vue using Tailwind v2. Requires Tailwind Live demo Installation $ npm install vue-tailwind-color-picker $ y

15 Jun 21, 2022

A color picker vue component

0 Feb 8, 2021

Color picker Vue.js component

vue-colorpicker Color picker Vue.js component.

3 Jul 13, 2018

Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Color picker for web and mobile browsers. Vue plugin version of Cordelia Color Picker library.

2 Aug 29, 2018

Vue color picker

Vue color picker Iro color picker for Vue. Demo See demo here Install npm install vue-iro-color-picker --save Usage import ColorPicker from 'vue-iro-

10 Sep 6, 2021

A Vue3.x based color picker component with gradient bar control.

a Vue3.x based color picker component. English | 中文 Features Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient. Suppor

7 Dec 3, 2022

(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

106 Dec 28, 2022

Color Codes for brands

Default starter for Gridsome This is the project you get when you run gridsome create new-project. 1. Install Gridsome CLI tool if you don't have npm

15 Dec 25, 2022

Lightweight color shader/blender/converter plugin implemented for Vue 2.

Vue Color Blender/Shader/Converter Lightweight color shader/blender/converter plugin implemented for Vue 2. Disclaimer The algoritmn used in this plug