返回介绍

开发指南

组件

JS

模板

colorSwitch 颜色转换

发布于 2021-04-03 05:35:22 字数 2017 浏览 857 评论 0 收藏 0

RGB转十六进制Hex

rgbToHex(rgb)

该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

  • rgb <String> RGB颜色值,如rgb(230, 231, 233)
export default{
	data() {
		return {
			rgb: 'rgb(13, 145, 20)'
		}
	},
	onLoad() {
		console.log(this.$u.rgbToHex(this.rgb));
	}
}

十六进制Hex转RGB

hexToRgb(hex)

该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值

  • hex <String> HEx颜色值,如#0afdce
export default{
	data() {
		return {
			hex: '#0afdce'
		}
	},
	onLoad() {
		console.log(this.$u.hexToRgb(this.hex));
	}
}

颜色渐变

colorGradient(startColor, endColor, step)

该函数实现两个颜色值之间等分取值,返回一个数组,元素为十六进制形式的颜色值,数组长度为step值。 例如:colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3),得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]

  • startColor <String> 开始颜色值,可以是HEX或者RGB颜色值,如#0afdce或者rgb(120, 130, 150)
  • endColor <String> 结束颜色值,可以是HEX或者RGB颜色值,如#0afdce或者rgb(120, 130, 150)
  • step <Number> 均分值,把开始值和结束值平均分成多少份
export default{
	onLoad() {
		console.log(this.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
		// 结果为:["#fafafa", "#fafafa", "#fbfbfb"]
	}
}

颜色透明度

colorToRgba(color, opacity = 0.3)

该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式,比如white),返回此颜色的rgba格式值,如下:

  • color <String> 颜色值,只能hex或者rgba格式
  • opacity <Number> 不透明度值,取值为0-1之间
this.$u.colorToRgba('#000000', 0.35);
// 结果为 rgba(0, 0, 0, 0.35)

this.$u.colorToRgba('rgb(255, 180, 0)', 0.4);
// 结果为 rgba(255, 180, 0, 0.4)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文