SOURCE

console 命令行工具 X clear

                    
>
console
var Photoshop = VueColor.Photoshop


var colors = {
  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
}
// // or
// var colors = '#194d33'
// // 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': VueColor.Material,
    'compact-picker':  VueColor.Compact,
    'swatches-picker':  VueColor.Swatches,
    'slider-picker':  VueColor.Slider,
    'sketch-picker': VueColor.Sketch,
    'chrome-picker': VueColor.Chrome,
    'photoshop-picker': VueColor.Photoshop
  },
  data () {
    return {
      colors
    }
  },
  watch: {
      colors(value) {
        console.log(JSON.stringify(value.rgba));
      }
  }
})
<div id="app">
    <!-- <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" /> -->
</div>
input {
    display: none;
}

label {
    background: rgba(0, 0, 0, 0);
}

label::before {
    content: "\f005";
    font-family: FontAwesome;
    margin-right: 5px;
    display: inline-block;
    color: rgba(0, 0, 0, 0.2);
}

label:hover {
    color: rgb(245, 50, 50);
    background: rgba(0, 0, 0, 1);
}

label:hover::before {
    color: rgb(245, 50, 50);
}

本项目引用的自定义外部资源