Nietzsche's Preposterous Moustache

    vue-mycolor

    1.0.11 • Public • Published

    vue-color

    npm

    Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).

    Live demo

    intro

    Installation

    NPM

    $ npm install vue-color

    CommonJS

    var Photoshop = require('vue-color/src/Photoshop.vue');
     
    new Vue({
      components: {
        'Photoshop': Photoshop
      }
    })

    ES6

    import { Photoshop } from 'vue-color'
     
    new Vue({
      components: {
        'photoshop-picker': Photoshop
      }
    })

    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.

    <script src="path/to/vue.js"></script>
    <script src="path/to/vue-color.min.js"></script>
    <script>
      var Photoshop = VueColor.Photoshop
    </script> 

    Local setup

    npm install
    npm run dev
    

    Usage

     
    var defaultProps = {
      hex: '#194d33',
      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
    }
     
    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: {
        colors: defaultProps
      }
    })
     
    <!-- suppose you have the data 'colors' in your component -->
    <material-picker v-model="colors" />
    <compact-picker v-model="colors" />
    <swatches-picker v-model="colors" />
    <slider-picker v-model="colors" />
    <sketch-picker v-model="colors" />
    <chrome-picker v-model="colors" />
    <photoshop-picker v-model="colors" />

    OR

    <chrome-picker :value="colors" @input="updateValue"></chrome-picker>

    TODO

    -[] docs -[] more components

    License

    vue-color is licensed under The MIT License.

    Keywords

    Install

    npm i vue-mycolor

    DownloadsWeekly Downloads

    2

    Version

    1.0.11

    License

    MIT

    Last publish

    Collaborators

    • sihan100