vue實現換主題\皮膚功能

現在的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 = 'css/';
    //   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文件裏。

注意在具體的vue文件中不需要引用theme中的css，因爲html中已經幫我們引用了

如果報各種與路徑有關的錯誤那就是你的路徑真的寫錯啦。好好對比一下組件中引用的路徑，webpack中配置的路徑和你的項目路徑吧~

當然這只是換皮膚的一種實現思路，也就是動態切換html中的引用路徑。也希望大家集思廣益提供更多的解決思路~

vue實現換主題\皮膚功能

vue實現換主題\皮膚功能

Spring Boot從入門到精通-頁面模板

Spring Boot從入門到精通-mybatis多數據源

Spring Boot從入門到精通-集成swagger

Spring Boot從入門到精通-集成mybatis

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結