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

最新推荐文章于 2024-06-04 15:15:04 发布
最新推荐文章于 2024-06-04 15:15:04 发布
阅读量1.9k 收藏 7
点赞数 4
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maple_leaf_red/article/details/108362552
版权

基于Vue的颜色选择器

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

文章目录

前言

基于Vue的颜色选择器（一）
—— 各种颜色格式之间的转换

一、颜色初了解

作为一个没有学过美术同时对色彩不太敏感的前端开发，在开发UI组件库的时候，避免不了需要面对颜色选择器组件。
这里推荐几篇我看过的博客

  1. 色彩空间中的 HSL、HSV、HSB 有什么区别？
  2. RGB、HSB/HSV、HSL三种颜色空间的原理理解与转换
  3. 如何实现一个颜色选择器

二、颜色格式

以红色为例，使用不同的格式（不区分大小写）显示红色如下

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

三、格式之间的转换

1.RGB转换HEX（即十六进制）

代码如下（示例）：

// 将rgb(255,0,0)转换成#ff0000
function rgb2hex(rgb){
	// rgby颜色值的正则
	var reg = /^(rgb|RGB)/;
	// 判断是否为rgb格式 
	if(reg.test(rgb)){
		// 将rgb的三个数值切割成数组 rgb(255,0,0) ——> ["255","0","0"]
		var colorArr = rgb.replace(/(?:rgb|RGB|\(|\))*/g,"").split(',');
		var hex = "#" + ((1 << 24) + (parseInt(colorArr[0]) << 16) + (parseInt(colorArr[1]) << 8) + parseInt(colorArr[2])).toString(16).slice(1);
     	return hex;
	}else{
		return rgb
	}
}
console.log(rgb2hex('rgb(255,66,99)')) // #ff4263
2.HEX转换RGB

代码如下（示例）：

// 将#f00转换成rgb(255,0,0)
hex2rgb(hex) {
	// 16进制颜色值的正则
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 把颜色值变成小写
    var color = hex.toLowerCase();
    // 判断是否为hex格式
    if (reg.test(color)) {
    	// 如果只有三位的值，需变成六位，如：#fff => #ffffff
    	if (color.length === 4) {
    		var colorNew = "#";
    		for (var i = 1; i < color.length; i += 1) {
    			colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
          	}
          	color = colorNew;
        }
        var colorChange = [];
        for (var i = 1; i < color.length; i += 2) {
        	colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
		}
		return "rgb(" + colorChange.join(",") + ")";
	} else {
		return color;
	}
}
console.log(hex2rgb('#ff4263')) // rgb(255,66,99)
3.RGB转换HSB/HSV

在这里插入图片描述

其中，注意：
M = Math.max(R, G, B)
m = Math.min(R, G, B)

代码如下（示例）：

// 将rgb(255,0,0)转换成hsb(360, 100%, 100%)
function rgb2hsb(rgb) {
	// rgb颜色值的正则
    var reg = /^(rgb|RGB)/;
	// 判断是否为rgb格式
	if (reg.test(rgb)) {
	// 将rgb的三个数值切割成数组 rgb(255,0,0) ——> ["255","0","0"]
		var colorArr = rgb.replace(/(?:rgb|RGB|\(|\))*/g, "").split(",");
        var M = Math.max(colorArr[0], colorArr[1], colorArr[2]);
        var m = Math.min(colorArr[0], colorArr[1], colorArr[2]);
        var H = 0;
        if (M == m) {
        	H = 0; //事实上，当max==min的时候，h无论为多少都无所谓
        } else if (M == colorArr[0] && colorArr[1] >= colorArr[2]) {
          	H = 60 * ((colorArr[1] - colorArr[2]) / (M - m)) + 0;
        } else if (M == colorArr[0] && colorArr[1] < colorArr[2]) {
          	H = 60 * ((colorArr[1] - colorArr[2]) / (M - m)) + 360;
        } else if (M == colorArr[1]) {
          	H = 60 * ((colorArr[2] - colorArr[0]) / (M - m)) + 120;
        } else if (M == colorArr[2]) {
          	H = 60 * ((colorArr[0] - colorArr[1]) / (M - m)) + 240;
        }
        var S = 0;
        if (M == 0) {
            S = 0;
        } else {
            S = parseInt(((M - m) / M) * 100);
        }
        return "hsb(" + parseInt(H) + "," + S + "%," + parseInt((M / 255) * 100) + "%)";
	} else {
        return rgb;
	}
}
console.log(rgb2hsb('rgb(255,66,99)')) // hsb(349,74%,100%)

CSS 里头支持的是 HSL，而不是 HSB，因此不要直接使用HSB的数值，因此不推荐使用HSB

4.RGB转换HSL

HSB和HSL在H（色相）上完全一致，但是两者的S（饱和度）、L（亮度）和B（明度）都不一致

在这里插入图片描述

代码如下（示例）：

// 将rgb(255,0,0)转换成hsl(360, 100%, 50%)
function rgb2hsb(rgb) {
	// rgb颜色值的正则
    var reg = /^(rgb|RGB)/;
	// 判断是否为rgb格式
	if (reg.test(rgb)) {
	// 将rgb的三个数值切割成数组 rgb(255,0,0) ——> ["255","0","0"]
		var colorArr = rgb.replace(/(?:rgb|RGB|\(|\))*/g, "").split(",");
        var M = Math.max(colorArr[0], colorArr[1], colorArr[2]);
        var m = Math.min(colorArr[0], colorArr[1], colorArr[2]);
        var H = 0;
        if (M == m) {
        	H = 0; //事实上，当max==min的时候，h无论为多少都无所谓
        } else if (M == colorArr[0] && colorArr[1] >= colorArr[2]) {
          	H = 60 * ((colorArr[1] - colorArr[2]) / (M - m)) + 0;
        } else if (M == colorArr[0] && colorArr[1] < colorArr[2]) {
          	H = 60 * ((colorArr[1] - colorArr[2]) / (M - m)) + 360;
        } else if (M == colorArr[1]) {
          	H = 60 * ((colorArr[2] - colorArr[0]) / (M - m)) + 120;
        } else if (M == colorArr[2]) {
          	H = 60 * ((colorArr[0] - colorArr[1]) / (M - m)) + 240;
        }
        return "hsl(" + parseInt(H) + "," + parseInt(((M - m) / (1 - Math.abs((M + m) / 255 - 1)) / 255) * 100) + "%," + parseInt(((M + m) / 2 / 255) * 100) + "%)";
	} else {
        return rgb;
	}
}
console.log(rgb2hsl('rgb(255,66,99)')) // hsl(349,100%,62%)
5.HSB/HSV转换HSL

代码如下（示例）：

// 将hsb(349,74%,100%)转换成hsl(349,100%,62%)
function hsb2hsl(hsb){
	// hsb颜色值的正则
	var reg = /^(hsb|HSB)/;
	// 判断是否为hsb格式
	if (reg.test(hsb)) {
		var colorArr = hsb.replace(/(?:hsb|HSB|\(|\)|%)*/g, "").split(",");
        return "hsl(" + parseInt(colorArr[0]) + "," + parseInt((((colorArr[1] / 100) * (colorArr[2] / 100)) / (1 - Math.abs((2 - colorArr[1] / 100) * (colorArr[2] / 100) - 1))) * 100) + "%," + parseInt(((2 - colorArr[1] / 100) * (colorArr[2] / 100) * 100) / 2) + "%)";
      } else {
        return hsb;
      }
}
console.log(hsb2hsl('hsb(127, 93%, 80%)')) // hsl(127,86%,42%)
6.HSL转换HSB/HSV

代码如下（示例）：

// 将hsl(349,100%,62%)转换成hsb(349,74%,100%)
function hsl2hsb(hsl){
	// hsl颜色值的正则
	var reg = /^(hsl|HSL)/;
	// 判断是否为hsl格式
	if (reg.test(hsl)) {
		var colorArr = hsb.replace(/(?:hsl|HSL|\(|\)|%)*/g, "").split(",");
        return "hsb(" + parseInt(colorArr[0]) + "," + parseInt((((colorArr[1] / 100) * (1 - Math.abs(2 * (colorArr[2] / 100) - 1)) * 2) / (2 * (colorArr[2] / 100) + (colorArr[1] / 100) * (1 - Math.abs(2 * (colorArr[2] / 100) - 1)))) * 100) + "%," + parseInt(((2 * (colorArr[2] / 100) + (colorArr[1] / 100) * (1 - Math.abs(2 * (colorArr[2] / 100) - 1))) * 100) / 2) + "%)";
      } else {
        return hsl;
      }
}
console.log(hsl2hsb('hsl(127, 93%, 80%)')) // hsb(127,37%,98%)

四、验证输入的颜色值格式，并将输入的颜色值统一转换成HEX颜色值

function parseColor(color) {
	var hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	var rgbReg = /^(rgb|RGB)/;
	var hsbReg = /^(hsb|HSB|hsv|HSV)/;
	var hslReg = /^(hsl|HSL)/;
	if (hexReg.test(color)) {
    	// 十六进制颜色值
        return color;
	} else if (rgbReg.test(color)) {
        // RGB颜色值
        return rgb2hex(color);
	} else if (hsbReg.test(color)) {
        // HSB颜色值
		return rgb2hex(hsb2rgb(color));
	} else if (hslReg.test(color)) {
        // HSL颜色值
        return rgb2hex(hsb2rgb(hsl2hsb(color)));
	}
}
林迦叶
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Web的项目50个项目：包含50个使用纯HTML，CSS和JavaScript制作的小型项目
02-13
从颜色、字体到布局，CSS几乎控制着网页的每一个视觉细节。项目中可能涵盖浮动布局、定位、响应式设计（如媒体查询）、Flexbox和Grid布局等。理解CSS选择器的优先级、盒模型以及如何利用CSS预处理器（如Sass或Less）...
book2
12-14
书架阅读器（Bookteader）是一个基于Web的文档阅读应用，旨在为用户提供一个集整理、存储和在线阅读于一体的平台。你可以将自己的PDF、EPUB或其他格式的电子书籍上传到服务器，然后通过Web界面轻松访问和阅读。该...
基于Vue 颜色选择器插件
05-11
基于Vue的颜色选择器插件 特点：1.简单易用，UI在原插件基础上优化增加了圆角和过渡动画 2.提供以 npm 的形式安装提供全局组件 3.在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能
Vue颜色选择器实现（两种方法）
lplovewjm的博客
05-31 3878
颜色选择器
colorPicker基于Vue的颜色选择器插件（附带使用方法和效果图）
最新发布
weixin_41422591的博客
06-04 286
hide=truechange：修改颜色事件效果图。
Vue中如何进行颜色选择与取色器？
程序猿徐师兄的博客
06-14 5101
如果我们想自定义颜色选择器组件，可以使用Vue.js的组件功能。下面是一个简单的自定义颜色选择器组件的示例代码。
vue项目中使用颜色选择器
热门推荐
maple_leaf_red的博客
08-21 1万+
颜色选择器引言type类型为color的inputelementUI中的ColorPicker组件vcolorpicker插件 引言 关于颜色选择器，我是用过三种，一个是HTML5新增的<input type="color">，一个是elementUI中的ColorPicker组件，一个是基于Vue的颜色选择器插件vcolorpicker type类型为color的input elementUI中的ColorPicker组件 vcolorpicker插件 ...
RGB与16进制颜色值互相转换
记录常见的问题以及解决办法
04-26 1899
RGB与16进制颜色值互相转换。
某马前端视频资料及软件.zip
09-07
Node.js则是一个基于Chrome V8引擎的JavaScript运行环境，允许开发者在服务器端使用JavaScript。Node.js的特色在于非阻塞I/O和事件驱动模型，适用于构建高性能的网络应用。学习Node.js涉及的知识点包括Express框架、...
前端静态模板-黑灰分页-学生作业毕设实训素材.zip
04-07
2. **CSS 样式**：学习CSS选择器，如类选择器、ID选择器、伪类选择器等，以及掌握布局技术，如Flexbox或Grid，来控制分页元素的排列和样式。黑灰色调的设计可能涉及到颜色、边框、背景等属性的设置。 3. **...
前端
02-26
现代前端框架，如React、Vue.js或Angular，都是基于JavaScript的，它们提供了更高效的方式来组织代码和管理应用程序的状态。 CSS则是用来美化HTML元素的工具，通过选择器选择元素并应用样式规则。你可以定义颜色、...
Vue基础
woshinidebabaa的博客
07-18 508
学习vue的基本
Vue 获取RGB值动态改变div背景色，实现RGB颜色预览
qq_46053369的博客
07-08 2497
动态改变div背景色
使用v-model绑定属性改变RGB颜色，使用计算属性生成颜色值，演示颜色的变化
wangyining070205的博客
09-25 972
最近学习Vue的 计算属性，用到颜色值，经过改造后，发现特别适合用来演示颜色的变化。效果如图所示，只需要拖动滑块，就可以实时看到颜色的变化及其颜色值。
自定义Vue颜色选择器
Jaycee的小木屋
03-22 2028
老板发来的原型图是这样的ant-design里面的颜色选择器是这样的因为每个人操作习惯不一样，后面可能会出现五颜六色的标签， 所以讨论了下，只限定一些颜色可设置。options: [},},},},},},},},},],},使用RadioButton组件举一反三。
Vue-颜色选择器实现方案——＞Vue-Color（ 实战*1+ Demo*7）
weixin_43850343的博客
12-19 2104
本篇博客提供一个实用的例子，以及例子对应的代码还有该组件其他类型的选择器的Demo。
Vue中如何进行颜色选择与调色板
徐师兄的博客
06-15 4706
在Vue中进行颜色选择和调色板可以使用v-model指令、vue-color库和CSS变量等多种方法。无论使用哪种方法，都需要注意数据隐私和版权等相关问题。希望本文能够帮助读者了解如何在Vue中进行颜色选择和调色板。
vue自定义颜色选择器（取色器）
HQBCK的博客
10-17 1790
vue实现自定义颜色选择器
颜色选择器vue
m0_53912016的博客
05-13 4117
颜色选择器 http://xiaokaike.github.io/vue-color/
提供一个基于vue日期选择器的使用示例
05-27
好的，以下是一个基于Vue的日期选择器的使用示例： 1. 首先，安装 `vue-datepicker`： ``` npm install vue-datepicker --save ``` 2. 在 Vue 组件中引入并注册日期选择器： ```vue <template> <div> <label for="date">选择日期：</label> <datepicker v-model="selectedDate" id="date" :format="dateFormat"></datepicker> </div> </template> <script> import Datepicker from 'vue-datepicker' export default { components: { Datepicker }, data() { return { selectedDate: null, dateFormat: 'yyyy-MM-dd' } } } </script> ``` 3. 在 `data` 中定义 `selectedDate` 和 `dateFormat`，其中 `selectedDate` 是选中的日期，`dateFormat` 是日期格式。 4. 在模板中使用日期选择器，通过 `v-model` 绑定选中的日期，通过 `:format` 指定日期格式。 5. 运行应用，即可看到一个日期选择器，并且可以选择日期。 注意：在使用日期选择器之前，确保已经安装并注册了 `vue` 和 `vue-datepicker`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值