关于vue3:vue3vitetselementplus-自定义主题

我我的项目应用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;
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据