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

最新推荐文章于 2025-08-23 10:35:18 发布

原创

最新推荐文章于 2025-08-23 10:35:18 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

大鹏展翅

文章标签：

#vue.js #javascript #前端

如果从0-1开始搭建项目，请参考：
https://editor.youkuaiyun.com/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