Welcome folks today in this blog post we will be building a native html5 rgb hexadecimal color picker using vue-color library in vue.js using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below library using the npm command as shown below
npm i vue-color
CommonJS
|
1 2 3 4 5 6 7 |
<span class="pl-k">var</span> <span class="pl-v">Photoshop</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vue-color/src/Photoshop.vue'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">components</span>: <span class="pl-kos">{</span> <span class="pl-s">'Photoshop'</span>: <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> |
ES6
|
1 2 3 4 5 6 7 |
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'vue-color'</span> <span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">components</span>: <span class="pl-kos">{</span> <span class="pl-s">'photoshop-picker'</span>: <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> |
Live Vue Color Picker demo
Browser globals
The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.
|
1 2 3 4 5 |
<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">path/to/vue.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">path/to/vue-color.min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-k">var</span> <span class="pl-v">Photoshop</span> <span class="pl-c1">=</span> <span class="pl-v">VueColor</span><span class="pl-kos">.</span><span class="pl-c1">Photoshop</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> |
Usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var colors = { hex: '#194d33', hex8: '#194D33A8', hsl: { h: 150, s: 0.5, l: 0.2, a: 1 }, hsv: { h: 150, s: 0.66, v: 0.30, a: 1 }, rgba: { r: 25, g: 77, b: 51, a: 1 }, a: 1 } // or var colors = '#194d33' // or var colors = '#194D33A8' // or var colors = { h: 150, s: 0.66, v: 0.30 } // or var colors = { r: 255, g: 0, b: 0 } // etc... new Vue({ el: '#app', components: { 'material-picker': material, 'compact-picker': compact, 'swatches-picker': swatches, 'slider-picker': slider, 'sketch-picker': sketch, 'chrome-picker': chrome, 'photoshop-picker': photoshop }, data () { return { colors } } }) |
