1.0.0 • Published 7 years ago

vuejs-colorpicker v1.0.0

Weekly downloads
56
License
MIT
Repository
github
Last release
7 years ago

VueJS Colorpicker :zap:

  • A simple Vue.js colorpicker :red_circle: for custom need.

  • This is on GitHub so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:

Requirements

:white_check_mark: Install :ok_hand:

npm install vuejs-colorpicker
// or
yarn add vuejs-colorpicker

:white_check_mark: Usage :mortar_board:

Register the component globally:

Vue.component('colorpicker', require('vuejs-colorpicker'));

Or use locally

import colorpicker from 'vuejs-colorpicker';

:white_check_mark: Example :four_leaf_clover:

<colorpicker :colors="colors" v-on:selected-color="setColorCode"></colorpicker>
Vue.component('example-component', {
	data() {
		return {
            color_code: null,
			colors: [
				{"hex" : "#FFFFFF"}, {"hex" : "#000000"}, {"hex" : "#FF00FF"}, {"hex" : "#FFFF00"}, 
				{"hex" : "#000FFF"}, {"hex" : "#F0F0F0"}, {"hex" : "#0F0F0F"}, {"hex" : "#00FF00"}
			],
		}
	},
	methods: {
		setColorCode(color_code) {
			this.color_code = color_code;
		},
	}
});

:white_check_mark: Props :book:

NameTypeDescription
colorsArray(required) The colors to be sent to the picker, see eg. for how to send it.
iconString(optional) Default is inverted large checkmark icon; Refer Semantic-UI Icons for specifying which icons you want.

:white_check_mark: Events :ear:

NameDescription
selected-colorEmits color_code hex.

NPM :octocat:

NPM