基于Vue的颜色选择器
基于Vue的颜色选择器(一)
基于Vue的颜色选择器(二)
文章目录
- 基于Vue的颜色选择器
- 前言
- 一、颜色选择器的UI
- 二、组件结构
- ①开关
- ②颜色面板
- 1、饱和度/明度面板
- 2、色相面板
- 3、基本颜色和常用颜色
- 4、历史颜色
- 5、颜色格式
- 6、颜色值
- 7、按钮
前言
基于Vue的颜色选择器(二)
—— 颜色选择器组件的搭建
一、颜色选择器的UI
对设计不在行,大体上采用的是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,暂时不支持中英文格式的颜色。
以红色为例,以下格式皆可,不论其大小写
- rgb(255,0,0)
- #f00或者#ff0000
- hsl(0,100%,50%)或者hsl(360, 100%, 50%)
- hsv(0, 100%, 100%)或者hsv(360, 100%, 100%)
- hsb(0, 100%, 100%)或者hsb(360, 100%, 100%)
7、按钮
按钮分为清空按钮和确定按钮
清空按钮,绑定点击事件,点击关闭颜色面板的同时将颜色值置为空
clearColor() {
this.Color = "";
this.isOpen = false;
}
确定按钮,绑定点击事件,点击关闭颜色面板的同时将颜色值经过逻辑(见上文历史颜色处)增加在历史颜色数组中