最简单的vue element-ui自定义主题换肤和自定义组件换肤功能_theme-chalk/index.css下载

一、写在前面

相信很多小伙伴都没整明白，自定义主题到底是怎么做的，今天最简单的换肤主题来了。

二、进入主题

1、主题文件的css下载

首先去这个地址：https://unpkg.com/element-ui/lib/theme-chalk/index.css

把css文件下载到本地 ，然后按下图的方式将刚刚下载的文件放到这里来。

2、新建一个主题工具文件

如图，可以封装成一个组件，格式及结构如下：

新建 stylesheet-text.js 内容如下:

/**
 * 自定义主题样式变更，如果是自己开发的组件，需要自定义主题的就在这里
 * @param COLORS 颜色值对象表
 * //这里需要注意的就是 aside 主题, 部分为自定义的主题,并非elementui里的组件样式,
 * 如果需要改变自定义组件的主题就需要在这里把编译好的scss或者less输出的css,在这里再写一遍.方便生成动态的   * 样式表
 */
export default (COLORS) => {
    //需要改变的样式表
    return `
        /** 主题背景 **/
        .primary-color{
            background-color:${COLORS.primary} !important;
        }

        /** 主题字体 **/
        .primary-color-text{
            color:${COLORS.primary} !important;
        }

        /** aside 主题 **/
        .app-aside .app-menu-vertical .el-submenu.is-opened .el-menu-item:hover,
        .app-aside .app-menu-vertical .el-submenu.is-opened .el-menu-item.is-active,
        .app-aside .app-menu-vertical .el-menu-item:hover,
        .app-aside .app-menu-vertical .el-menu-item.is-active,
        .el-menu--vertical .el-menu-item.is-active,
        .el-menu--vertical .el-menu-item:focus,
        .el-menu--vertical .el-menu-item:hover{
            background: ${COLORS.primary} !important;
            color: #fff;
        }

        /** 右上角图标鼠标悬停 **/
        .app-layout-header__icon:hover{
            color: ${COLORS.primary};
        }
    `;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

新建theme-util.js 内容如下:
需要导入上面新建的文件

import getStylesheetText from './stylesheet-text';
//样式文件下载 https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css
const COLORS = {
    //颜色选择器默认颜色值,这个值要和element-variables一样
    primary: '#fa6e86'
    // 'shade-1': '#3a8ee6'
    // 'light-1': '#53a8ff',
    // 'light-2': '#66b1ff',
    // 'light-3': '#79bbff',
    // 'light-4': '#8cc5ff',
    // 'light-5': '#a0cfff',
    // 'light-6': '#b3d8ff',
    // 'light-7': '#c6e2ff',
    // 'light-8': '#d9ecff',
    // 'light-9': '#ecf5ff'
};

// 获取页面一共引入了多少个style 文件
const originalStylesheetCount = document.styleSheets.length;

/**
 * 写入样式
 */
const writeNewStyle = (cssText, color) => {
    COLORS.primary = color;
    Object.keys(COLORS).forEach(key => {
        cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + COLORS[key]);
    });
    //样式表
    const stylesheetText = `${getStylesheetText(COLORS)} ${cssText}`;
    // 如果之前没有插入就插入
    if (originalStylesheetCount === document.styleSheets.length) {
        const style = document.createElement('style');
        style.innerText = stylesheetText;
        document.head.appendChild(style);
    } else { // 如果之前没有插入就修改
        document.head.lastChild.innerText = stylesheetText;
    }
};

/**
 * 获取本都的样式
 * @param {*} url
 */
const getLocalStyle = (color = `#fa6e86`) => {
    const request = new XMLHttpRequest();
	//将主题下载到本地的原因就是减少请求时的延迟卡顿,避免出现主题闪烁的问题
	//浏览器端的js不能像node一样直接读取文件,所以只能以这样的方式来获取css的文件内容.
    request.open('GET', `/theme/index.css`);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && (request.status == 200 || request.status == 304)) {
            // 调用本地的如果拿不到会得到html,html是不行的
            writeNewStyle(getStyleTemplate(request.response), color);
        }
    };
    request.send();
};

/**
 * 获取样式模板
 * @param {*} data
 */
const getStyleTemplate = (data) => {
    const colorMap = {//这里的主题表对应elementui的初始变量表
        '#409eff': 'primary',
        '#3a8ee6': 'shade-1',
        '#53a8ff': 'light-1',
        '#66b1ff': 'light-2',
        '#79bbff': 'light-3',
        '#8cc5ff': 'light-4',
        '#a0cfff': 'light-5',
        '#b3d8ff': 'light-6',
        '#c6e2ff': 'light-7',
        '#d9ecff': 'light-8',
        '#ecf5ff': 'light-9'
    };
    Object.keys(colorMap).forEach(key => {
        const value = colorMap[key];
        data = data.replace(new RegExp(key, 'ig'), value);
    });
    return data;
};

export { getLocalStyle };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

最后新建一个 ThemeSetting/index.vue 文件,内容如下:

<template>
    <el-color-picker v-model="themeColor" />
</template>
<script>
import { getLocalStyle } from './theme-util';
export default {
    name: 'ThemeSetting',
    data() {
        return {
            themeColor: window.localStorage.getItem('app-theme-color') || '#409EFF'
        };
    },
    created() {
    	//刷新之后也能保持不变的主题,当然有需求可以存到后台,进行云端同步.
        this.handleThemeChange(this.themeColor);
    },
    methods: {

        /**
         * 主题切换回调
         */
        handleThemeChange(color) {
            window.localStorage.setItem('app-theme-color', color);
            getLocalStyle(color);
        }
    }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、上面就是vue的自定义主题全部内容了

加油，快去试试吧,。

上面的代码部分是由真实项目简化而来的,有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

感谢您的阅读,如果此文章或项目对您有帮助，请给个一键三连吧,GitHub有开源项目,需要的小伙伴可以顺手star一下！

GitHub: https://github.com/langyuxiansheng

更多信息请关注公众号: “笔优站长”

扫码关注“笔优站长”，支持站长