Element UI 主题切换与动态换肤功能实现指南

Element UI 提供了切换主题和动态换肤功能，可以通过以下步骤实现：

1. 安装主题包

Element UI 提供了多个主题包，可以在官网下载。下载完成后，将主题包放置在项目的静态资源文件夹中。

2. 引入主题文件

在项目入口文件（如 main.js）中引入主题文件。例如：

import 'element-theme-default';

默认主题为 element-theme-default，如果使用其他主题包，需要引入对应的主题文件。

3. 切换主题

可以通过修改全局样式变量来改变主题。Element UI 提供了一个 changeTheme 方法，可以用来动态切换主题。例如：

import { changeTheme } from '@/utils/theme';

changeTheme('purple'); // 切换为紫色主题

changeTheme 方法接收一个参数，表示要切换的主题名称。

4. 动态换肤

动态换肤需要使用 CSS 变量。Element UI 提供了一个 useCssVars 方法，可以将 CSS 变量注入到全局样式中。例如：

import { useCssVars } from '@/utils/theme';

useCssVars(); // 注入 CSS 变量

document.body.style.setProperty('--primary-color', '#ff0000'); // 修改主色调为红色

useCssVars 方法会将所有的 CSS 变量注入到全局样式中，然后就可以直接使用 CSS 变量来修改样式了。修改 CSS 变量的方法与修改普通样式相同，可以直接使用 JavaScript 来修改。