vue中換膚

　　項目中期的時候，大佬對項目的色彩不滿意，要求更換，這樣產品就提出了需求，要求可以根據用戶自己的需求去自己切換主題色；這邊根據產品提供的幾種顏色，看了下網上的博客，一開始我以為可以只引入一個css文件，然后像js一樣提出一個變量改變這個變量就可以的，但是看到后期，發現css文件還是要准備多個。（如果有哪個親能可以這樣實現，希望能告知我一下，讓我也見識下）

　　這里我引入了sass，因為我可以在一個css文件中編寫相關的樣式代碼，將需要的變量提出來，最后每次更改都可以只改變相應的變量值，然后自動生成相應的文件，我是把文件內容拷貝出來，放到vue的static靜態目錄下，新建了皮膚的skin文件夾，每個顏色弄了一個css文件，（因為sass需要安裝ruby和sass相關插件才能生成css，所以需要開發的時候生成相應的css，不能在線編譯，所以要引入多個css文件）引用sass就是統一編譯處理，因為后期更改css工作量太大，為了提高工作效率和正確率才這樣做的。

　　　我利用了elementUI的下拉菜單組件在項目的header頭部組件中定義了顏色切換的下拉狀態選擇（公司內網，不能登錄截圖給大家看，你們可以去element看下拉的樣式，腦補一下下，抱歉）；

          

<el-dropdown trigger="hover" @command="changeColor">
  <span class="el-dropdown-link">/*選中的顏色*/</span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="0" name="green" style="background: green"> </el-dropdown-item>
        <el-dropdown-item command="1" name="pink" style="background: pink"> </el-dropdown-item>
        <el-dropdown-item command="2" name="#ffa737" style="background: #ffa737"> </el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

上面@command事件的

changeColor是切換膚色的方法，需要寫在methods里面；這變項目中引入了vuex，所以為了方便多個組件共享數據狀態，我把用戶選擇的顏色狀態存儲到了vuex中，（這個狀態只能在
該用戶登錄時，對此次進行操作，對於永久保存狀態的話就需要后台配合，去存儲了，但是這個其實沒有必要，還是看你們的項目要求吧）；vue的data中聲名變量themeStyle：this.$store.state.themeColor;
vuex里給了初始顏色值

我在index.html頁面引入了默認的css，<link rel="stylesheet" href="static/skin/green.css" class="theme">；這里必須要給class，這樣為下面的代碼切換css保證頁面
替換只引入了一個css，不然頁面會重復引入多個

 changeColor(command){
            this.themeStyle = command;
            let theme = document.getElementsByClassName('theme')[0];
            if( this.themeStyle == 0){
                theme.setAttribute('href','static/skin/green.css');
                this.$store.commit('getThemeColor',0); /*把顏色存儲到vuex*/
                document.getElementsByClassName('el-dropdown-link')[0].style.backgroundColor = 'green'
            }else if( this.themeStyle == 1){
                theme.setAttribute('href','static/skin/pink.css');
                this.$store.commit('getThemeColor',1);
                document.getElementsByClassName('el-dropdown-link')[0].style.backgroundColor = 'pink'
            }...
        }

當然初始化的時候也是要判斷

   這是為了讓用戶切換膚色，退出后vuex還存儲着顏色狀態，再登入后選中的顏色還是顯示相應的

mounted(){
 if( this.themeStyle == 0){
                document.getElementsByClassName('el-dropdown-link')[0].style.backgroundColor = 'green'
            }else if( this.themeStyle == 1){
                document.getElementsByClassName('el-dropdown-link')[0].style.backgroundColor = 'pink'
            }...
}

這樣大多都完成了，只要提取主題色的css即可。感謝閱讀，如果有哪怕一點點的指點都可以給我留言，我會好好學的。本人技拙，小烏龜慢慢爬，嘻嘻。。

學習之余，也要享受生活，最近刷完了鎮魂，喜歡沈巍，上得廳堂，下得廚房，國名好老公，嘻嘻，推薦片尾曲《只是太在意》，好聽~