jq960素材网

当前位置: 主页 > JQ/JS插件 >

vue-color拾色器

官方网址:http:// 下载次数:
插件描述

vue-color

npm

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

Live demo

intro

Installation

NPM


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

<!-- 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" />


colors accepts either a string of a hex color '#333' or a object of rgb or hsl values 
{ r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }, whatever tinycolor2
accepts as an input.

<!-- 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>


License

vue-color is licensed under The MIT License.

顶一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔线----------------------------
栏目列表