【vue3】【elementPlus】【自定义主题色】

最新推荐文章于 2025-05-28 19:02:01 发布

timeguys

最新推荐文章于 2025-05-28 19:02:01 发布

阅读量985

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： vue.js javascript 前端

大鹏展翅

本文链接：https://blog.csdn.net/Timeguys/article/details/141024444

如果从0-1开始搭建项目，请参考：
https://editor.csdn.net/md/?articleId=140995569

1.创建主题工具js文件(命名随便)：

在这里插入图片描述

// theme.js 代码

import { ElMessage } from 'element-plus'

/**
 * 颜色转换函数
 * @method hexToRgb hex 颜色转 rgb 颜色
 * @method rgbToHex rgb 颜色转 Hex 颜色
 * @method getDarkColor 加深颜色值
 * @method getLightColor 变浅颜色值
 */
export function useChangeColor() {
  // str 颜色值字符串
  const hexToRgb = (str) => {
    let hexs = ''
    let reg = /^\#?[0-9A-Fa-f]{6}$/
    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, g, b) => {
    let reg = /^\d{1,3}$/
    if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
      ElMessage.warning('输入错误的rgb