自己动手写一个基于Vue的颜色选择器（二）

基于Vue的颜色选择器

基于Vue的颜色选择器（一）
基于Vue的颜色选择器（二）

---

---

前言

基于Vue的颜色选择器（二）
—— 颜色选择器组件的搭建

---

一、颜色选择器的UI

对设计不在行，大体上采用的是iView颜色选择器的样式
iview颜色选择器

我的颜色选择器设计图如下：

二、组件结构

大体分成两部分，一个是打开颜色面板的开关，一个是颜色面板

①开关

功能描述：
开关分成两个小部分，左侧部分用来显示初始颜色或者选择完成之后的颜色；右侧部分其实就是图标。
点击打开关闭颜色面板的操作设置在开关整体盒子上。
移入移出改变开关边框颜色也设置在开关整体盒子上。
开关还有种简易的初始样式：
vColorPicker——基于 Vue 的颜色选择器插件
仅需要打开关闭颜色面板的功能即可

②颜色面板

颜色面板可分为以下几个部分

1、饱和度/明度面板

本质是三个图层的叠加。
最下面的图层是需要我们修改背景色的图层，我使用的hsl格式的颜色显示的背景色，只需要改变色相，饱和度100%，亮度50%即可；
中间的图层是从左到右，从白色到透明的渐变背景；background: linear-gradient(90deg, #fff, transparent);
最上面的图层是从下到上，从黑色到透明的渐变背景；background: linear-gradient(0deg, #000, transparent);
具体的效果参考 传送门
在图层最上面还需要一个空心的小圆用来显示当前选择（点击或者拖拽停止）的位置

2、色相面板

主要是一个从左到右，从红黄绿青蓝紫红的渐变背景，
0%红色，1/6黄色（最接近的是16.67%，我直接四舍五入的，以下同理），1/3绿色（33.33%），50%青色，2/3蓝色（66.67%），5/6紫色（83.33%），100%红色

background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);

在背景上方还需要一个小方块用来显示当前选择（点击或者拖拽停止）的位置

3、基本颜色和常用颜色

基本颜色我用的是彩虹色加黑白两个通用色

basicColors: [
    "#f00", // 红色
    "#ff0", // 黄色
    "#0f0", // 绿色
    "#0ff", // 青色
    "#00f", // 蓝色
    "#f0f", // 紫色
    "#fff", // 白色
	"#000" // 黑色
],

常用颜色我穿插了各种颜色，也有我经常使用的主题色系，颜色仅供参考

commonColors: [
	"#ff4500",
  	"#ff1e02",
  	"#ff9900",
  	"#ffc12a",
  	"#fad400",
  	"#F9E31C",
  	"#19be6b",
  	"#90cf5b",
  	"#90ee90",
  	"#00babd",
  	"#00ced1",
  	"#00215f",
  	"#0071be",
  	"#4e81bb",
  	"#2db7f5",
  	"#c71585",
  	"#72349d",
  	"#8165a0",
  	"#c4bdcc",
  	"#17233d",
  	"#515a6e",
  	"#808695",
  	"#c5c8ce"
],

每个色块带有点击事件，点击某色块，将改变颜色值

4、历史颜色

为什么我把历史颜色单独拎出来说呢，当然是因为他特别了。
第一，进入包含颜色选择器页面的时候，从本地查询是否存在历史颜色，没有就不渲染；

var rememberColor = localStorage.getItem("rememberColor");
if (rememberColor != null) {
	this.rememberColors = JSON.parse(rememberColor);
}

第二，每次点击确定按钮的时候保存当前颜色到历史颜色中（常规操作）
第三，保存颜色之前先判断当前颜色是否为空，判断当前颜色是否已存在于历史颜色数组中，判断历史颜色数组是否已有20个颜色

5、颜色格式

Google Chrome中<input type="color">的样式给我的启发，我设置了三种格式
①RGB②HSL③HSB/HSV

6、颜色值

你可以输入多种格式的颜色值，包括HEX，RGB，HSL，HSB，HSV，暂时不支持中英文格式的颜色。

以红色为例，以下格式皆可，不论其大小写

1. rgb(255,0,0)
2. #f00或者#ff0000
3. hsl(0,100%,50%)或者hsl(360, 100%, 50%)
4. hsv(0, 100%, 100%)或者hsv(360, 100%, 100%)
5. hsb(0, 100%, 100%)或者hsb(360, 100%, 100%)

7、按钮

按钮分为清空按钮和确定按钮
清空按钮，绑定点击事件，点击关闭颜色面板的同时将颜色值置为空

clearColor() {
	this.Color = "";
	this.isOpen = false;
}

确定按钮，绑定点击事件，点击关闭颜色面板的同时将颜色值经过逻辑（见上文历史颜色处）增加在历史颜色数组中