import { ElMessage } from 'element-plus'
/**
* 颜色转换函数
* @method hexToRgb hex 颜色转 rgb 颜色
* @method rgbToHex rgb 颜色转 Hex 颜色
* @method getDarkColor 加深颜色值
* @method getLightColor 变浅颜色值
*/
export function useChangeColor() {
// str 颜色值字符串
const hexToRgb = (str: string): any => {
let hexs: any = ''
let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
if (!reg.test(str)) {
ElMessage.warning('输入错误的hex')
return ''
}
str = str.replace('#', '')
hexs = str.match(/../g)
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16)
return hexs
}
// r 代表红色 | g 代表绿色 | b 代表蓝色
const rgbToHex = (r: any, g: any, b: any): string => {
let reg = /^\d{1,3}$/
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
ElMessage.warning('输入错误的rgb颜色值')
return ''
}
let hexs = [r.toString(16), g.toString(16), b.toString(16)]
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`
return `#${hexs.join('')}`
}
// color 颜色值字符串 | level 变浅的程度,限0-1之间
const getDarkColor = (color: string, level: number): string => {
let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
if (!reg.test(color)) {
ElMessage.warning('输入错误的hex颜色值')
return ''
}
let rgb = useChangeColor().hexToRgb(color)
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level))
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
}
// color 颜色值字符串 | level 加深的程度,限0-1之间
const getLightColor = (color: string, level: number): string => {
let reg = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
if (!reg.test(color)) {
ElMessage.warning('输入错误的hex颜色值')
return ''
}
let rgb = useChangeColor().hexToRgb(color)
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2])
}
return {
hexToRgb,
rgbToHex,
getDarkColor,
getLightColor
}
}
解决elementuiplus的button组件点击之后仍然是hover的问题以及修改主题颜色之后button的颜色问题
原创
©著作权归作者所有:来自51CTO博客作者mb650bf5d8d0151的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
android Button 颜色的变化(点击,放开,点击不放)
最近该死叫我改一个Button的效果,就是按住要一个效果,放开要一个。好吧,抄袭网上的。 在res/drawable/b
移动开发 java android xml sed -
MFC 修改button、checkbox按钮的文字颜色
MFC 修改button、checkbox按钮的文字颜色
mfc windows c++ 头文件 -
Android开发中Button背景颜色不能修改问题及解决方法
Android开发中Button按钮背景颜色不能修改问题及解决方法
android android studio ide 开发语言 服务器 -
Android button的默认颜色 安卓修改button的颜色
我们可以使用selector来实现Button的特效,如图所示: 默认情况 获得焦点的时候 点击按钮 main.xml Xml代码 <?xml
Android button的默认颜色 android button encoding listview