vue实战-实现换主题/皮肤功能

我的小熊不见了丶

发布于 2019-05-22 21:45:06

2.1K0

发布于 2019-05-22 21:45:06

文章被收录于专栏：晓月寒·晓月寒·

现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。

那么我们怎么在vue中实现这个换皮肤的功能呢？

项目结构

实现思路
- 我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件（js、css、img之类）。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。
优化策略
- 其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
- 把皮肤相关的css压缩。
实现代码分析如下是我们的html代码，注意其中的<link rel="stylesheet" name="theme" href="">，其他的都是正常引用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>iView admin</title>
   <meta charset="UTF-8">
   <!--  -->
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
   <!-- 引入的css -->
   <link rel="stylesheet" href="/dist/main.css">
   <!-- 注意这是我们换皮肤需要的css -->
   <link rel="stylesheet" name="theme" href="">
   <!-- 图标 -->
   <link rel="icon" href="./td_icon.ico" type="image/x-icon"/>
</head>
<body>
<div id="app"></div>
<!-- 用到的js -->
<script type="text/javascript" src="/dist/vender-base.js"></script>
<script type="text/javascript" src="/dist/vender-exten.js"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。

目录结构

pc端

<template>
    <div style="display:inline-block;padding:0 6px;">
        <Dropdown trigger="click" @on-click="setTheme">
            <a href="javascript:void(0)">
                <Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="paintbucket"></Icon>
                <Icon type="arrow-down-b"></Icon>
            </a>
            <DropdownMenu slot="list">
                <DropdownItem v-for="(item, index) in themeList" :key="index" :name="item.name">
                    <Row type="flex" justify="center" align="middle">
                        <span style="margin-right:10px;"><Icon :size="20" :type="item.name.substr(0, 1) !== 'b' ? 'happy-outline' : 'happy'" :color="item.menu"/></span>
                        <span><Icon :size="22" type="record" :color="item.element"/></span>
                    </Row>
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import config from '../../../../build/config.js';
export default {
    name: 'themeSwitch',
    data () {
        return {
            themeList: [
                {
                    name: 'black_b',
                    menu: '#495060',
                    element: '#2d8cf0'
                },
                {
                    name: 'black_g',
                    menu: '#495060',
                    element: '#00a854'
                },
                {
                    name: 'black_y',
                    menu: '#495060',
                    element: '#e96500'
                }
            ]
        };
    },
    methods: {
        // 点击切换事件
        setTheme (themeFile) {
            let menuTheme = themeFile.substr(0, 1);
            let mainTheme = themeFile.substr(-1, 1);
            if (menuTheme === 'b') {
                // 黑色菜单
                this.$store.commit('changeMenuTheme', 'dark');
                menuTheme = 'dark';
            } else {
                this.$store.commit('changeMenuTheme', 'light');
                menuTheme = 'light';
            }
            let path = '';
               // 取到我们在html上给皮肤的css留的坑并且设置路径
            let themeLink = document.querySelector('link[name="theme"]');
            let userName = Cookies.get('user');
            if (localStorage.theme) {
                let themeList = JSON.parse(localStorage.theme);
                let index = 0;
                let hasThisUser = themeList.some((item, i) => {
                    if (item.userName === userName) {
                        index = i;
                        return true;
                    } else {
                        return false;
                    }
                });
                if (hasThisUser) {
                    themeList[index].mainTheme = mainTheme;
                    themeList[index].menuTheme = menuTheme;
                } else {
                    themeList.push({
                        userName: userName,
                        mainTheme: mainTheme,
                        menuTheme: menuTheme
                    });
                }
                localStorage.theme = JSON.stringify(themeList);
            } else {
                localStorage.theme = JSON.stringify([{
                    userName: userName,
                    mainTheme: mainTheme,
                    menuTheme: menuTheme
                }]);
            }
            let stylePath = '';
            if (config.env.indexOf('dev') > -1) {
                stylePath = './src/views/main-components/theme-switch/theme/';
            } else {
                stylePath = 'dist/';
            }
            if (mainTheme !== 'b') {
                path = stylePath + mainTheme + '.css';
            } else {
                path = '';
            }
            themeLink.setAttribute('href', path);
        }
    },
    created () {
        let path = '';
        // 判断运行环境用于切换地址
        if (config.env.indexOf('dev') > -1) {
            path = './src/views/main-components/theme-switch/theme/';
        } else {
            path = 'dist/';
        }
        let name = Cookies.get('user');
        // 如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤
        if (localStorage.theme) {
            let hasThisUser = JSON.parse(localStorage.theme).some(item => {
                if (item.userName === name) {
                    this.$store.commit('changeMenuTheme', item.menuTheme);
                    this.$store.commit('changeMainTheme', item.mainTheme);
                    return true;
                } else {
                    return false;
                }
            });
            if (!hasThisUser) {
                this.$store.commit('changeMenuTheme', 'dark');
                this.$store.commit('changeMainTheme', 'b');
            }
        } else {
            this.$store.commit('changeMenuTheme', 'dark');
            this.$store.commit('changeMainTheme', 'b');
        }
        // 根据用户设置主题
        if (this.$store.state.app.themeColor !== 'b') {
            let stylesheetPath = path + this.$store.state.app.themeColor + '.css';
            // 取到我们在html上给皮肤的css留的坑并且设置路径
            let themeLink = document.querySelector('link[name="theme"]');
            themeLink.setAttribute('href', stylesheetPath);
        }
    }
};
</script>

手机端

<template>
  <div style="display:inline-block;padding:0 6px;">
    <div @click="showBtn">换皮肤</div>
    <van-actionsheet v-model="show" :actions="themeList" @select="setTheme"/>
  </div>
</template>

<script>
import Cookies from "js-cookie";

import { Actionsheet } from "vant";
// import config from "../../../../build/config.js";
export default {
  name: "themeSwitch",
  components: {
    [Actionsheet.name]: Actionsheet
  },
  data() {
    return {
      show: false,
      themeList: [
        {
          name: "黑色",
          data: "black_b"
        },
        {
          name: "绿色",
          data: "black_g"
        },
        {
          name: "黄色",
          data: "black_y"
        }
      ]
    };
  },
  methods: {
    showBtn() {
      this.show = true;
    },
    setTheme(themeFile) {
      themeFile = themeFile.data;
      let menuTheme = themeFile.substr(0, 1);
      let mainTheme = themeFile.substr(-1, 1);
      if (menuTheme === "b") {
        // 黑色菜单
        this.$store.commit("changeMenuTheme", "dark");
        menuTheme = "dark";
      } else {
        this.$store.commit("changeMenuTheme", "light");
        menuTheme = "light";
      }
      let path = "";
      let themeLink = document.querySelector('link[name="theme"]');
      let userName = Cookies.get("user");
      if (localStorage.theme) {
        let themeList = JSON.parse(localStorage.theme);
        let index = 0;
        let hasThisUser = themeList.some((item, i) => {
          if (item.userName === userName) {
            index = i;
            return true;
          } else {
            return false;
          }
        });
        if (hasThisUser) {
          themeList[index].mainTheme = mainTheme;
          themeList[index].menuTheme = menuTheme;
        } else {
          themeList.push({
            userName: userName,
            mainTheme: mainTheme,
            menuTheme: menuTheme
          });
        }
        localStorage.theme = JSON.stringify(themeList);
      } else {
        localStorage.theme = JSON.stringify([
          {
            userName: userName,
            mainTheme: mainTheme,
            menuTheme: menuTheme
          }
        ]);
      }
      let stylePath = './';
    //   stylePath = "./src/view/component/theme-switch/theme/";
      // if (config.env.indexOf('dev') > -1) {
      //     stylePath = 'src/view/component/theme-switch/theme';
      // } else {
      //     stylePath = 'dist/';
      // }
      if (mainTheme !== "b") {
        path = stylePath + mainTheme + ".css";
      } else {
        path = "";
      }
      themeLink.setAttribute("href", path);
      this.show = false;
    }
  },
  created() {
    let path = "";
    path = "css/";
    // if (config.env.indexOf("dev") > -1) {
    //   path = "src/view/component/theme-switch/theme";
    // } else {
    //   path = "dist/";
    // }

    let name = Cookies.get("user");
    if (localStorage.theme) {
      let hasThisUser = JSON.parse(localStorage.theme).some(item => {
        if (item.userName === name) {
          this.$store.commit("changeMenuTheme", item.menuTheme);
          this.$store.commit("changeMainTheme", item.mainTheme);
          return true;
        } else {
          return false;
        }
      });
      if (!hasThisUser) {
        this.$store.commit("changeMenuTheme", "dark");
        this.$store.commit("changeMainTheme", "b");
      }
    } else {
      this.$store.commit("changeMenuTheme", "dark");
      this.$store.commit("changeMainTheme", "b");
    }
    console.log(path);
    // 根据用户设置主题
    if (this.$store.state.app.themeColor !== "b") {
      let stylesheetPath = path + this.$store.state.app.themeColor + ".css";
      let themeLink = document.querySelector('link[name="theme"]');

      themeLink.setAttribute("href", stylesheetPath);
    }
  }
};
</script>

在首页引用该组件，初次渲染时进入该组件的creat方法，如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤。在store中加入相应方法。

changeMenuTheme (state, theme) {
    state.menuTheme = theme;
},
changeMainTheme (state, mainTheme) {
     state.themeColor = mainTheme;
 }

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

pc端

 new CopyWebpackPlugin([
            {
                from: 'td_icon.ico'
            },
            {
                from: 'src/styles/fonts',
                to: 'fonts'
            },
            {
                from: 'src/views/main-components/theme-switch/theme'
            }
        ],

手机端

 new CopyWebpackPlugin([
            {
                from: 'static',
                to: 'static'
            },
            {
                from: 'src/view/component/theme-switch/theme',
                to: './css'
            }
        ])

之前我们可能已经有了这个插件了，现在只是需要把皮肤相关的css额外配置一下。以上工作完成之后已经可以动态的切换html中皮肤相关的css路径了。接下来就需要我们在需要切换css的地方引用具体的class并且写三套样式分别放在theme中的css文件里。