美文网首页
如何实现 Vue 换肤/更换主题呢

如何实现 Vue 换肤/更换主题呢

作者: 酷酷的凯先生 | 来源:发表于2020-06-10 18:33 被阅读0次
前言

在产品的更新迭代的过程中, 不光是完善产品的过程, 更是满足用户各种需求以便更好的提高用户体验的过程。其中换肤/更换主题就是其中比较重要的功。能需要实现主题换肤功能，不仅仅是颜色的更改，还需要包括图片，字体等文件等更换，可以根据用户自己的需求去自己切换主题色。

思路

我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个 html 以及一堆静态文件（js、css、img之类）。而在 html 中引用了这些 js 和 css 。我们要换皮肤的话其实就是动态的去切换 css，所以在这里实现换皮肤其实也就是动态的更改 html 中引用 css 的路径，使得当用户选择了不同的皮肤，页面引用的 css 不同从而呈现的样式也不一样。

实现

如下是我们打包生成后的 html 代码，
注意其中 <link rel="stylesheet" name="theme" href="">，其他都是正常引用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>换肤/更换主题</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1">
   <!-- 引入的css -->
   <link rel="stylesheet" href="./animation.css">
   <!-- 注意这是我们换皮肤需要的css -->
   <link rel="stylesheet" name="theme" href="">
</head>
<body>
<div id="app"></div>
<!-- 用到的js -->
<script type="text/javascript" src="./comment.js"></script>
<script type="text/javascript" src="./jQuery.js"></script>
</body>
</html>

换皮肤一般是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
假定弹框选中皮肤后调用的方法为, 则代码如下:

export default {
    methods: {
        selectTheme (theme) {
            let menuTheme = theme;
            // 如选中的是红色按钮
            if (menuTheme === 'r') {
                // 更新至状态, 以便其他地方用
                this.$store.commit('changeTheme', 'red');
            } else { // 否则就是默认的绿色
                this.$store.commit('changeTheme', 'blue');
            }
            let path = '';
            // 取到我们在html上给皮肤的css留的坑并且设置路径
            let themeLink = document.querySelector('link[name="theme"]');
            // Cookies 自己封装的 cookie 的方法
            let userName = Cookies.get('user');
            if (localStorage.theme) {
                let tmList = JSON.parse(localStorage.theme);
                let index = 0;
                // 匹配出当前用户的信息
                let hasThisUser = tmList.some((item, i) => {
                    if (item.userName === userName) {
                        index = i;
                        return true;
                    } else {
                        return false;
                    }
                });
                if (hasThisUser) {
                    tmList[index].menuTheme = menuTheme;
                } else {
                    // 更新至本地 
                    tmList.push({
                        userName: userName,
                        menuTheme: menuTheme
                    });
                }
                localStorage.theme = JSON.stringify(tmList);
            } else {
                // 更新至本地 
                localStorage.theme = JSON.stringify([{
                    userName: userName,
                    menuTheme: menuTheme
                }]);
            }
            let stylePath = '';
            /// 如果是 开发环境
            if (config.env.indexOf('dev') > -1) {
                stylePath = './src/assets/css/theme/';
            } else { // 生产环境
                stylePath = './';
            }
            themeLink.setAttribute('href', path);
        }  
    }
}

动态切换最关键的两行代码：
let themeLink = document.querySelector('link[name="theme"]')
themeLink.setAttribute('href', stylesheetPath)
但是这个时候我们皮肤相关的css并没有打到代码中，需要我们额外进行配置。
在 webpack 的配置文件中找到 plugins，加入以下插件

new CopyWebpackPlugin([
    {
        from: 'td_icon.ico'
    },
    {
        from: 'src/styles/fonts',
        to: 'fonts'
    },
    {
        from: 'src/assets/css/theme'
    }
])

以上工作完成之后已经可以动态的切换 html 中皮肤相关的css路径了。接下来就需要我们在需要切换 css 的地方引用具体的 class 。

如果报各种与路径有关的错误那就是你的路径真的写的不对。

这只是小生换皮肤的一种实现思路，即动态切换html中的引用路径。
大家如果有更好的思路, 欢迎留言

相关文章