今天给小伙伴们推荐一个功能超赞的顺滑般颜色拾取器组件VueColor。
vue-color 一个功能媲美PS颜色选择器的vue.js组件。拥有流畅般随意选取颜色效果，支持Sketch颜色旋转器，Photoshop颜色选择器，Chrome颜色选择器。
安装
$ npm install vue-color -S
插件使用
<template>
<div class="vuecolor-wrap">
<photoshop-picker v-model="colors" />
<!--支持回调事件-->
<chrome-picker :value="colors" @input="updateValue"></chrome-picker>
<!--支持预先设置颜色-->
<sketch-picker
@input="updateValue"
:value="colors"
:preset-colors="[
'#f00', '#00ff00', '#00ff0055', 'rgb(201, 76, 76)', 'rgba(0,0,255,1)', 'hsl(89, 43%, 51%)', 'hsla(89, 43%, 51%, 0.6)'
]"
></sketch-picker>
</div>
</template>
<script>
// 有7种风格，用哪种直接引用对应的名字就行
// Material、Compact、Swatches、Slider、Sketch、Chrome、Photoshop
import { Photoshop } from "vue-color";
export default {
components: {
'photoshop-picker': Photoshop,
'material-picker': Material,
'compact-picker': Compact,
'swatches-picker': Swatches,
'slider-picker': Slider,
'sketch-picker': Sketch,
'chrome-picker': Chrome,
},
data() {
return {
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
colors: '#ff9900',
// or
colors: { h: 150, s: 0.66, v: 0.30 },
// or
colors: { r: 255, g: 0, b: 0 }
};
}
};
</script>
附上预览示例及仓库地址
# 预览地址
https://xiaokaike.github.io/vue-color/
# 仓库地址
https://github.com/xiaokaike/vue-color
ok，这次就分享到这里，感谢大家的阅读。如果有什么好的想法可以在评论区交流讨论。也可以给个赞或转发，多谢支持！
