乐趣区

关于vue3:vue3vitetselementplus-自定义主题

jiezi

我我的项目应用 vite，并且在按需导入时自定义主题。
我的项目依赖：

"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.0",
"crypto-js": "^4.1.1",
"echarts": "^5.4.0",
"element-plus": "^2.2.25",
"pinia": "^2.0.26",
"vue": "^3.2.45",
"vue-router": "^4.1.6"

一、通过 SCSS 变量更换主题色

我我的项目应用了 SCSS，theme-chalk 也是应用 SCSS 编写而成，因而能够间接批改 Element Plus 的款式变量。在 packages/theme-chalk/src/common/var.scss 文件中能够查找 SCSS 变量。

1、新建一个款式文件，

例如：src/assets/styles/element/index.scss

/* 只须要重写你须要的变量即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': ('base': green,),
  ),
);

// 如果只是按需导入，则能够疏忽以下内容。// 如果你想导入所有款式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

下面 index.css 的内容援用自 element Plus 官网。
留神：最初一部分须要，并不是按官网所说按需导入可疏忽。

2、应用 scss.additionalData 来编译所有利用 scss 变量的组件。

import {defineConfig} from 'vite'
import {fileURLToPath, URL} from 'node:url'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// element plus 按需主动导入组件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// 按需导入 element 组件
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import path from 'path'

const postCssPxToRem = require("postcss-pxtorem")
const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
  server: {host: '0.0.0.0' // 通过 ip+port 拜访服务器},
  plugins: [vue(), 
    vueJsx(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 主动导入 Vue 相干函数，如：ref, reactive, toRef 等
      imports: ['vue'],      
      resolvers: [ElementPlusResolver(), // 主动导入 Element Plus 相干函数，如：ElMessage, ElMessageBox... (带款式)    
        // 主动导入图标组件
        IconsResolver({
          prefix: 'Icon', // <IconCarbonApps />
          // extension: 'jsx',
        }),        
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        // Auto register Element Plus components
        // 主动导入 Element Plus 组件
        ElementPlusResolver(),  
        // 主动注册图标组件
        IconsResolver({
          // prefix: 'i', // 默认前缀 i, false, 就可不是用前缀
          // 实际上应用的时候，要加上 i-ep- 前缀，并举荐改成短横线命名
          // <el-icon><i-ep-arrow-right-bold /></el-icon>
          // {prefix}-{collection}-{icon}
          // this is optional, default enabling all the collections supported by Iconify
          enabledCollections: ['ep']  // element-plus 图标库
        })        
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
      // compiler: 'jsx', // or 'solid' 不知是不是与 <IconCarbonApps /> 无关
    }),
  ],
  resolve: {
    alias: {'@': fileURLToPath(new URL('./src', import.meta.url)) //  resolve(__dirname, 'src'),
    }
  },
  css: {
    preprocessorOptions: {
      scss: {additionalData: '@use"src/assets/styles/element/index.scss"as *;',},
    },
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 64, // 1rem 的大小
          propList: ['*'], // 须要转换的属性，这里抉择全副都进行转换
        })
      ]
    },
  
  },
})

二、通过 CSS 变量设置

element 用 css 变量重构了简直所有组件的款式零碎。
它兼容 SCSS 变量零碎。element 应用 SCSS 的函数主动生成须要用到的 css 变量。
能够动静地扭转组件内的个别变量，以便更好地自定义组件款式，而不须要批改 SCSS 文件从新编译一次。
之后，每个组件的 css 变量名称和作用将被写入到对应的组件文档中。
就像这样：

:root {--el-color-primary: green;}

如果只想自定义一个特定的组件，只需为某些组件独自增加内联款式。

<el-tag style="--el-tag-bg-color: red">Tag</el-tag>

出于性能起因，更加举荐在类名下增加自定义 css 变量，而不是在全局的 :root 下。

.custom-class {--el-tag-bg-color: red;}

如果您想要通过 js 管制 css 变量，能够这样做：

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')

比方：批改按钮字体色彩 

.el-button--primary {--el-button-text-color: var(--el-color-success);
    // --el-button-text-color: #00ff00;
}
退出移动版